cssトランジションを使用して拡張可能なブロックを作成したいと思います。
.box {
width: 300px;
max-height: 30px;
overflow: hidden;
background: #aaa;
-webkit-transition: max-height 400ms ease-in-out;
-moz-transition: max-height 400ms ease-in-out;
-ms-transition: max-height 400ms ease-in-out;
-o-transition: max-height 400ms ease-in-out;
transition: max-height 400ms ease-in-out;
}
.box.open {
max-height: 999px;
}
実例は次のとおりです:http://jsfiddle.net/qswgK/。
ブロックを展開するとうまくスライドしますが、折りたたむと多少の待ち時間が発生します。これは、最新バージョンのChrome、Firefox、Opera、IEで見られます。なぜそれが起こるのですか?JavaScriptアニメーションを使用せずにこれを回避できますか?
PS max-heightの代わりに高さアニメーションを使用する場合、折りたたみはうまく機能しますが、展開された高さが不明なブロックを折りたたみて展開する必要があります。
折りたたみアニメーションが最大高さを非常に大きな値から変更し始め、要素の実際の高さを超えるのに時間がかかり、高さの目に見える変化がその瞬間の後にのみ開始されるために発生したようです。私が見ている唯一の回避策は、展開と折りたたみに別々のアニメーションを使用することです。最初のアニメーションは少し長く、最初のアニメーションは非常に鋭く始まり、後者のアニメーションが終わる直前に緩和されます。次のようになります。
.box {
width: 300px;
max-height: 30px;
overflow: hidden;
background: #aaa;
transition: max-height 300ms cubic-bezier(0, .6, .6, 1); /* for collapsing */
}
.box.open {
max-height: 999px;
transition: max-height 400ms ease-in; /* for expansion */
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加