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

f:id:ATATAT:20210220152505p:plain:w600

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

atatat.hatenablog.com

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

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

ポイントとしては<detail>内に<div>を用意しておき、cssでdetailのopen属性でdivに限定してanimation: accordion 1s linear;とすることでdetailsで展開する時間を指定する。比較のためもう一方はdetalsタグ内に<div>を設けていないため、cssのanimation: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;
  }