CSS transitionをheight 0 ⇔ auto で有効化する方法【max-height禁止】

久々に個人的に目からウロコの tips があったので記事にしておこうと思います。

はじめに

アコーディオンアニメーションを実装しようとして、css transition height auto などと検索すると、主にheightを数値指定する方法や、max-heightを使った方法がヒットすると思います。
それらの方法は、何かしら大きな制約があり今まで避けていましたが、実装が簡単かつ制約がかなり小さい方法を知りました。

実装

<div class="container open">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

.container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-out;
}

.container.open {
  grid-template-rows: 1fr;
}

.inner {
  overflow-y: hidden;
}

あとは js などで、open クラスをつけ外しすればアニメーションします。
（grid-template-*って transition できるんだ。。。という発見でした。）

動作サンプル

https://codesandbox.io/s/css-accordion-n2h5jy?file=/src/App.tsx

Can I use

https://caniuse.com/mdn-css_properties_grid-template-rows_animation

参考

• Transitioning to Height Auto (Two Ways)
  • 今回こちらの内容をご紹介しました
• CSS Grid Can Do Auto Height Transitions
  • 今回こちらの方法は、hack がすぎるので紹介していません。