css3トランジションアコーディオンメニュー

Question

選択フォームコントロールに代わるアコーディオンメニューを作ったので、css3トランジションを使ってスムーズに展開/縮小したいと思っています。ここ
はjsfiddleへのリンクです：http://jsfiddle.net/hKsCD/4/

私はリンクのそれぞれの高さをアニメーション化する必要がありますが、私はそれを行う方法がわからないんだけど所望の効果を達成するために。 CSS3の遷移は混乱します。あなたが注意する必要がありO_O

Answer 1

.accordion { 
    height: 20px; /*define height to start from*/ 
    transition: height 2s; 
    -moz-transition: height 2s; /* Firefox 4 */ 
    -webkit-transition: height 2s; /* Safari and Chrome */ 
    -o-transition: height 2s; /* Opera */ 
} 
.accordion.expanded { 
    height: 400px;/*desired height when expanded*/ 
} 

高さは一つの要素から別のものに変化する場合しかし、あなたは、これらのケースでは、最大幅の回避策を使用する必要があります「高さ：オートは」機能しません。

上記の例のheightをmax-heightに置き換え、展開状態をmax-heightに設定してください（アニメーションの速度がアニメーション化されるために、あまりにも高くはありませんが、最大幅も同じです）。あなたが気付かないほど速いアニメーションになります）