📌

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

らんす🍐

2023/10/11に公開

CSS

animation

tech

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

はじめに

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

実装

<divclass="container open"><divclass="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-rows0.5s ease-out;}.container.open{grid-template-rows:1fr;}.inner{overflow-y: hidden;}