0

選択フォームコントロールを置き換えるアコーディオンメニューを作成しました。css3トランジションを使用してスムーズに展開/縮小したいと思います。
jsfiddleへのリンクは次のとおりです：http：//jsfiddle.net/hKsCD/4/

目的の効果を得るには、各リンクの高さをアニメーション化する必要がありますが、その方法がわかりません。CSS3の移行は混乱を招きます。O_o

4

1 に答える 1

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：auto」が機能しないため、これらの場合は最大幅の回避策を使用する必要があります。

heightたとえば、上記の例で、要素が到達しないものにmax-height設定された展開状態に置き換えmax-heightます（ただし、アニメーションの速度は、アニメーション化される高さに対して計算されるため、高すぎません->最大幅が高すぎます（例：9999px）は、気付かないほど高速なアニメーションになります）

于 2012-04-30T07:09:34.577 に答える