webcreatersboxさんで紹介されてたdetailsタグとsummaryタグを使ったアコーディオンにCSSでアニメーションを付け加えて見ようと思ってやってみました。

レスポンシブデザインが主流になって、アコーディオンなどの動作が多用されるサイトが多いですね。

でもjQueryは重いし、jsでガシガシ描くにはめんどくさいってことで現時点で対応ブラウザの問題はありますが、これから実装が増えるんじゃないかと思い、忘備録的な意味でブログに書こうと思いつきました。

<div>
 <details>
   <summary>Adobe xDってすごいよ</summary>
   プロトタイプでページ遷移のイメージを共有したり、　sticky headerのイメージを作成したりできるよ。
 </details>
</div>

これにアニメーションを追加するってことでやってみます。

SCSSの内容

div{
  margin: 10px 0;
}
details{
  &[open]{
    summary{
      transition: all 300ms ease;
    }
    p{
      animation: openDetail 400ms ease;
      display: block;
      height: auto;
    }
  }
  p{
    display: none;
    height: 0px;
  }
}
summary{
  background: gray;
  padding:0.5em;
  cursor: pointer;
  color: white;
  outline: none;
}
p{
  padding: 10px;
}


@keyframes openDetail {
  0% {
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(0%);
  }
  50% {
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    padding: 10px;
    transform: translateY(0%);
  }
}

CSSの場合

div {
  margin: 10px 0;
}

details[open] summary {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

details[open] p {
  -webkit-animation: openDetail 400ms ease;
          animation: openDetail 400ms ease;
  display: block;
  height: auto;
}

details p {
  display: none;
  height: 0px;
}

summary {
  background: gray;
  padding: 0.5em;
  cursor: pointer;
  color: white;
  outline: none;
}

p {
  padding: 10px;
}

@-webkit-keyframes openDetail {
  0% {
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    opacity: 1;
    padding: 10px;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes openDetail {
  0% {
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  100% {
    opacity: 1;
    padding: 10px;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

これで若干のアニメーションはつけることができました。

でもこれって閉じる時にはアニメーションかかってないので、もう少し検討しないといけないですね。