1

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 の代わりに高さアニメーションを使用すると、折りたたみはうまく機能しますが、展開された高さが不明なブロックを折りたたんで展開する必要があります。

4

1 に答える 1

2

これは、折りたたみアニメーションが最大高さを非常に大きな値から変更し始め、要素の実際の高さを超えるのに時間がかかり、高さの目に見える変化がその瞬間の後にのみ開始されるために発生するようです. 私が見る唯一の回避策は、展開と折りたたみに別々のアニメーションを使用することです。次のように、最初のアニメーションはイーズインのある少し長いもので、後者は非常に急激に始まり、終了する直前にイーズアウトする少し短いものです。

.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 */
}

フィドル

于 2013-07-09T10:52:36.493 に答える