つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~ detailタグのアニメーション

 長文や長めのコードを隠しておいて、必要に応じて展開できるdetailタグ。

atatat.hatenablog.com

展開する時の動き(アニメーション)をつけるために以下の方法が紹介されている。

zenn.dev

一番下に上の記事を参考にアニメーションあり・なしの比較などできるようにコードを変更している。

ポイントとしては<detail>内に<div>を用意しておき、cssでdetailのopen属性でdivに限定してanimation: accordion 1s linear;とすることでdetailsで展開する時間を指定する。 比較のためもう一方はdetalsタグ内に<div>を設けていないため、cssanimation:accrdionが適用されず、通常のdetailsによる展開となる。

<details>
  <summary>「雨ニモマケズ」 アニメーション</summary>
  <div></div>
</details>
details[open] div {
  animation: accordion 1s linear;
  overflow: hidden;
  border-bottom: 2px solid #eee;
  font-size: 1rem;
  padding: 0rem 1rem;
}

@keyframesによりフレームごとの状態をCSSで記述する。元の例よりも細かくすることで滑らかに展開されるようにした。

@keyframes accordion {
  0% {
    opacity: 0;
    height: 0;
  }
  
  20% {
    opacity: 0;
    height: 50px;
  }
  
  40% {
    opacity: 0;
    height: 100px;
  }
  
  60% {
    opacity: 0.1;
    height: 150px;
  }
  80% {
    opacity: 0.2;
    height: 200px;
  }
  90%{
  opacity: 0.5;

  }
  100% {
    opacity: 1;
  }

以下は通常のdetailsよりもanimationの設定をするとゆっくり、滑らかに展開されることが確認できると思う。

See the Pen Accordion by ATATAT (@atatat) on CodePen.