web-dev-qa-db-ja.com

クラス変更時の `display：none`からのCSS遷移？

私はサイトの雰囲気を「近代化」するためにトランジションを使い始めました。これまでのところ、 :hoverトランジションはうまく機能しています。今、クラスが変更されたときなど、他のものに基づいて遷移をトリガーできるかどうか疑問に思っています。

関連するCSSは次のとおりです。

#myelem {
    opacity: 0;
    display: none;
    transition: opacity 0.4s ease-in, display 0.4s step-end;
    -ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
    -moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
    -webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
}
#myelem.show {
    display: block;
    opacity: 1;
    transition: opacity 0.4s ease-out, display 0.4s step-start;
    -ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
    -moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
    -webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
}

変更をトリガーするJavaScriptは次のとおりです。

document.getElementById('myelem').className = "show";

しかし、移行は起こっていないようです-ある状態から別の状態にジャンプしているだけです。

私は何を間違えていますか？

csscss-transitions
49
Niet the Dark Absol

displayプロパティを削除しても機能します。

#myelem {
    opacity: 0;
    transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
}
#myelem.show {
    opacity: 1;
    transition: opacity 0.4s ease-out;
    -ms-transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
}​

JSFiddle.

この理由は、番号を持つCSSプロパティのみを移行できるためです。 「50％状態」は「display: none; "および" display: block; "？計算できないため、displayプロパティをアニメーション化することはできません。

45
MarcoK

状態間の遷移にdisplayプロパティを使用することはできません。

7
Henrik

コメントを含む@MarcoKによって提供された答えは、すでに正しい方向を示しています。 displayプロパティの設定hinderstransition。
Aベタープラクティスは、将来のために、ブラウザベンダーのプレフィックス付きバージョンの後にプレフィックスなし（標準）バージョンを置くことです-証明。後者のプロパティは前者を上書きします。
その他の改善：

  • @Charmanderが指摘したように、-ms-transitionはどのInternet Explorerでもサポートされていません
  • Op 10.5-12＆Op Mobile 10-12 の前に-o-transitionというプレフィックスが付いたOperaのベンダーもあります。グローバルブラウザ。完成させるためにそれを入れます

CSS：

#myelem {
    opacity: 0;
    -webkit-transition: opacity .4s ease-in;
       -moz-transition: opacity .4s ease-in;
         -o-transition: opacity .4s ease-in;
            transition: opacity .4s ease-in;
}
#myelem.show {
    opacity: 1;
    -webkit-transition: opacity .4s ease-out;
       -moz-transition: opacity .4s ease-out;
         -o-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;
}​
3
Volker E.

次の代わりに、CSSで要素の表示と非表示をアニメーション化することができます。

display: none;

/* and */

display: block;

つかいます：

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

このプロパティを置き換えるため、transitionを使用してcss値をアニメーション化できます。

作業例： https://jsfiddle.net/utyja8qx/

1
Dariusz Sikorski