今まで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
![Web制作者の念願がついに叶った! height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/93e43b2f0cddb381fb1f706428dc7ea3e432a653/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202304%2F2023120201-01%402x.png)