css - コンテンツに基づいて高さが動的に変化するdivのwebkit-transitionの高さ?

Question

次の jsFiddle を参照してください

http://jsfiddle.net/SgyEW/10/

ボックスを拡大/縮小するさまざまな長さのコンテンツを表示するさまざまなボタンをクリックできます。

高さの変化をアニメーション化して、それほどびくびくしないようにしたいので、次を追加して試しました：

-webkit-transition: all 1s linear;

しかし、それはこのユースケースでは何の効果もありません。JavaScript を必要としないソリューションに関するアイデアはありますか?

ありがとう

Answer 1

残念ながら、Javascript の支援がなければ、CSS3 トランジションで高さをアニメーション化する方法はありません。以下を確認してください。

高さを移行するにはどうすればよいですか: 0; 高さ: 自動; CSSを使用していますか？

CSS3 を使用して、height:0 からコンテンツの可変高さに移行できますか?

さらに、コードは からdisplay: noneに移動しますがdisplay: block、これはいずれの場合も高さに影響しません。display none の代わりにheight: 0with を使用overflow: hidden;