height:0→autoをトランジションする

通常、height: 0からheight: autoへのトランジションはできない。height:300pxのように固定高にすればトランジションできるが、内包するコンテンツによってはバグることがある。

calc-size()を使ってheight: calc-size(auto);とすると、内包するコンテンツの高さにあわせてトランジションできる。（※2024-07-01現在、Chrome Canaryでのみ実行可能）

<button id="open">Open</button>
<section class="panel">
  <p>Content</p>
</section>

document.getElementById('open').addEventListener('click', () => {
  document.querySelector('.panel').classList.toggle('expanded')
})

.panel {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;

  &.expanded {
    /* トランジションしない */
    height: auto;

    /* トランジションするけど固定高で、内包するコンテンツによってはバグる*/
    height: 300px;

    /* トランジションする!!!!! */
    height: calc-size(auto);
  }
}

デモ

※2024-07-01現在、Chrome Canaryでのみ実行可能

calc-size()が使えるようになるまでの対応

max-heightを使うことでcalc-size(auto)と同じような効果が得られる。ただし、若干hackyになるので注意。

.expand {
  transition: all 0.2s;
  height: auto;
  overflow: hidden;

  &[aria-hidden="true"] {
    max-height: 0;
  }
  &[aria-hidden="false"] {
    max-height: 100vh;
    visibility: hidden;
  }
}