::details-content 疑似要素

details要素をCSSアニメーションさせるサンプル


概要
- Chrome `131` から、 `details` 要素がCSSのみでアニメーション可能になった - `131` からサポートされる `::details-content` 疑似要素をアニメーションさせることで、ようやくCSSだけでアニメーション可能になる - 2024/11/20 現在、 `::details-content` 疑似要素に対応してるのは、まだChromeのみ - `interpolate-size` は内在サイズ ( `auto` や `max-content` など) のアニメーションを許可するプロパティ - `:root` に指定しておけば `calc-size()` を使わずとも内在サイズのアニメーションが可能になる - 非サポートの環境で悪さするわけでもないので、リセットするCSSに標準搭載しても問題なさそう

デモ
メニュー1
内容1
内容1
内容1
内容1
内容1
メニュー2
内容2
内容2
内容2
内容2
内容2

コード

CSS

 
details {
  &::details-content {
    interpolate-size: allow-keywords;
    overflow: clip;
    block-size: 0;
    transition-duration: 0.3s;
    transition-property: content-visibility, block-size;
    transition-behavior: allow-discrete;
  }

  &[open]::details-content {
    block-size: unset;
  }
}

参照