details要素のgrid-template-rowsを0frから1frにtransitionさせることでアコーディオンを実装する 🪗

前々回のdetails要素と前回のgrid-template-rowsの合わせ技です。

details要素の開閉にアニメーションを設定したい場合、本当はopen属性の有無で子要素のgrid-template-rowsを変更することで、JavaScriptなしで実現できそうなものなのですが、残念ながら、現状ではopen属性の有無でプロパティを変化させる際、transitionを設定してもアニメーションしないのでJavaScriptの力が必要となります。

DEMO

ソースコード

javaScript

const details = document.querySelector('[data-is-open]');
const duration = 200; // CSSのtransitionに合わせる

details.addEventListener('click', (evt) => {
  evt.preventDefault(); // details要素のデフォルトの挙動（open属性のトグル）を止める

  if (details.open) {
    details.dataset.isOpen = false;
    setTimeout(() => { // データ属性を変更してからopen属性を外す
      details.removeAttribute('open');
    }, duration);
  } else {
    details.setAttribute('open', 'open');
    setTimeout(() => { // open属性を付けてからデータ属性を変更する
      details.dataset.isOpen = true;
    }, duration / 2);
  }
});