内容に基づいて動的に変化する高さを持つdivのウェブキット遷移の高さ？

Question

あなたはボックスが縮小/拡大する原因となる異なる長さの内容を示す各種ボタンをクリックすることができます

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

次jsFiddle

を参照してください。私はそれがそうビクビクではないので、高さ変化をアニメーション化したい

は、私が追加することによって、これを試してみました：

-webkit-transition: all 1s linear; 

をしかし、それは、このユースケースでは効果がありません。 JavaScriptを必要としないソリューションの観点からのアイデアですか？

おかげ

Answer 1

私はいくつかのJavascriptの支援なしCSS3トランジションと高さをアニメーションする方法がない怖い、チェックアウト：

How can I transition height: 0; to height: auto; using CSS?

Can you use CSS3 to transition from height:0 to the variable height of content?

また、あなたのコードは行きますdisplayから：none to display：ブロック。これはどんな場合でも高さに影響を与えません。 noneを表示する代わりにuse height：0 with overflow：hidden;