Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto;へのトランジションです。高さが固定値であれば簡単にアニメーションできますが、コンテンツ量が不明で成り行きの場合はJavaScriptで高さを取得する必要がありました。 height: 0;からheight: auto;へのトランジションをCSSで実装する方法を紹介します。元記事を読んで、CSS Gridをここで使用するのか！ と驚きました。 🧙‍♂️ CSS trick: transition from height 0 to auto! by Fra

[coliss]

JavaScriptは無し、height: 0;からheight: auto;へのトランジションをCSSで実装する方法

[kvx]

visibility:hiddenも必要なのでは。そしてvisibility入れると閉じる時のアニメーションがうまくいかない。あとborderやpaddingとeasingの相性が悪い。

[nakayuki805]

ちょうど一昨日やろうとして固定値で妥協したやつだった

[logi]

私のサイトのアコーディオンメニュー置き換えたい

[shiromatakumi]

こんな方法があったのか

[nekosann_08]

もうgridにも慣れた頃だろうし、うれしいTipsだ

[Shinwiki]

もう出回ってるのでは

[retdaisuke]

いいね、試してみよう

[webmugi]

なるほど。求めていた解。

[tempodeamor]

地味に便利だ

[ghostbass]

いずれ試すかも