要素の高さを0からautoまでCSSでトランジションさせたいと思って色々試してみました。 試した順に書いていきます。 例として横並びのドロップダウンナビゲーションを使います。 こういうのはユーザビリティ的にどうなのとかそういう話は今回の本題じゃないので置いておきます。 動作サンプルとして違いが分かりやすいので選んだだけです。 HTMLは次のようにしました。最小構成だと大体こんな感じになるかと思います。 <nav class="global"> <ul> <li class="dropdown"> <a href="#">Lorem</a> <ul> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <!-- 3つまで繰り返し --> </ul> </li> <li class="dropdown"> <a href="#">Ipsum<
![auto heightなCSS Transitions](https://cdn-ak-scissors.b.st-hatena.com/image/square/a51bb369b492e4b453f08ca6dfedb466d0e54672/height=288;version=1;width=512/https%3A%2F%2Funformedbuilding.com%2Fassets%2Fimages%2Fog.png)