CSS - 要素の高さをautoにアニメ化

Question

これは愚かな質問のようですが、私は数時間それをしてきましたが、この簡単なことはできません。

高さは0pxです。

HTML

<div class="element"> ...content... </div> 

CSS

.element { 
    height: 0px; 
    overflow: hidden; 
    transition: height 2s; 
} 

は、それから私は、ボタンがクリックされたときにチェックするいくつかのJSを得て、要素にクラスのアニメーション」を追加しました。問題がある

CSS

.animate { 
    height: auto; 
} 

、CSSで指定したような一切の2秒のアニメーションはありません。

私は同じことをテストしましたが、height: auto;にアニメーション化するのではなく、height: 150px;にアニメーション化しました。

これを行うと効果はありますが、コンテンツの高さが変わるため高さautoを使用する必要があります。ここで

がJSFiddleである私が作成した：https://jsfiddle.net/0ctzc4hv/1/

は、どのように私はautoに要素の高さをアニメーションに行きますか？事前に

おかげで、

デビッド

Answer 1

autoプロパティがアニメーション可能ではない、あなたがこのことにより、最大の高さのプロパティをアニメーション化回避することができます。

Answer 2

あなたはそれを隠さないのはなぜ、あなたが望むものを達成するためにjqueryのを使用します。

Display: none; 

jQueryの機能：：

$('you_element').slideDown();