CSS3の崩壊はレイテンシーで機能します

ジャストボリス

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]

編集
0

コメントを追加

0

関連記事

分類Dev

CSS3アニメーションは、最初のホバーでのみ機能します

分類Dev

CSS3 アニメーションは、iOS Safari の Codepen でのみ機能します。

分類Dev

CSS3アニメーションはIE11では機能しませんが、他のブラウザーでは機能します

分類Dev

崩壊内の崩壊は機能しません

分類Dev

Find Nextは、最初のイテレーションでのみ機能します

分類Dev

ナビゲーションの崩壊がBootstrapで機能しない

分類Dev

このアニメーション(css3)はFirefoxでは機能しません

分類Dev

崩壊はモーダルで機能していません

分類Dev

このcss3アニメーションはどのように機能しますか?

分類Dev

タブレイアウトはフリングでのみ崩壊し、低速スクロールでは崩壊しません

分類Dev

CSS3アニメーションが機能しないのはなぜですか?

分類Dev

CSS3アニメーションはChromeでは機能しませんがFirefoxでは機能します

分類Dev

このCSS3アニメーションがMSEdgeまたはIE11で機能しないのはなぜですか?

分類Dev

Bootstrap 3ナビゲーションバー-タブレットの幅で崩壊しませんか?

分類Dev

クロームとサファリでのみレスポンシブレイアウトが壊れていますが、Firefoxは機能します

分類Dev

css3キーフレームトランジションがChromeで機能しませんか?

分類Dev

LinuxのPulseAudioではレイテンシーが機能しません

分類Dev

オプションタイプは崩壊しますか?

分類Dev

ブートストラップでのナビゲーションバーの崩壊が機能しない

分類Dev

Css3アニメーションはIE11では機能しません

分類Dev

レスポンシブテーブルはFirefoxでのみ機能します

分類Dev

CSSグリッドはグリッドアイテム内のマージンの崩壊を抑制しますか?

分類Dev

CSS3アニメーションの背景がFirefoxで機能しない

分類Dev

Firefoxの外部でCSS3アニメーションが機能しない

分類Dev

Firefoxの外部でCSS3アニメーションが機能しない

分類Dev

どのCSS3機能がまだベンダープレフィックスを必要としますか?

分類Dev

div:beforeがフローティングの場合CSS3アニメーションは機能しません(WebKit)

分類Dev

Firefoxでのみ機能するCSS3アニメーション

分類Dev

ハードコードされたスライドショーは機能しますが、WordPressでレンダリングすると壊れます

Related 関連記事

  1. 1

    CSS3アニメーションは、最初のホバーでのみ機能します

  2. 2

    CSS3 アニメーションは、iOS Safari の Codepen でのみ機能します。

  3. 3

    CSS3アニメーションはIE11では機能しませんが、他のブラウザーでは機能します

  4. 4

    崩壊内の崩壊は機能しません

  5. 5

    Find Nextは、最初のイテレーションでのみ機能します

  6. 6

    ナビゲーションの崩壊がBootstrapで機能しない

  7. 7

    このアニメーション(css3)はFirefoxでは機能しません

  8. 8

    崩壊はモーダルで機能していません

  9. 9

    このcss3アニメーションはどのように機能しますか?

  10. 10

    タブレイアウトはフリングでのみ崩壊し、低速スクロールでは崩壊しません

  11. 11

    CSS3アニメーションが機能しないのはなぜですか?

  12. 12

    CSS3アニメーションはChromeでは機能しませんがFirefoxでは機能します

  13. 13

    このCSS3アニメーションがMSEdgeまたはIE11で機能しないのはなぜですか?

  14. 14

    Bootstrap 3ナビゲーションバー-タブレットの幅で崩壊しませんか?

  15. 15

    クロームとサファリでのみレスポンシブレイアウトが壊れていますが、Firefoxは機能します

  16. 16

    css3キーフレームトランジションがChromeで機能しませんか?

  17. 17

    LinuxのPulseAudioではレイテンシーが機能しません

  18. 18

    オプションタイプは崩壊しますか?

  19. 19

    ブートストラップでのナビゲーションバーの崩壊が機能しない

  20. 20

    Css3アニメーションはIE11では機能しません

  21. 21

    レスポンシブテーブルはFirefoxでのみ機能します

  22. 22

    CSSグリッドはグリッドアイテム内のマージンの崩壊を抑制しますか?

  23. 23

    CSS3アニメーションの背景がFirefoxで機能しない

  24. 24

    Firefoxの外部でCSS3アニメーションが機能しない

  25. 25

    Firefoxの外部でCSS3アニメーションが機能しない

  26. 26

    どのCSS3機能がまだベンダープレフィックスを必要としますか?

  27. 27

    div:beforeがフローティングの場合CSS3アニメーションは機能しません(WebKit)

  28. 28

    Firefoxでのみ機能するCSS3アニメーション

  29. 29

    ハードコードされたスライドショーは機能しますが、WordPressでレンダリングすると壊れます

ホットタグ

アーカイブ