50

サイトの雰囲気を「モダン化」するためにトランジションを使い始めました。これまでのところ、: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";

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

私は何が間違っているのですか？

4

4 に答える 4

48

プロパティを削除すると機能し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プロパティのみを移行できるためです。display: none;「50％の状態」は「 」と「 」の間にあるべきだと思いますdisplay: block;か？これは計算できないため、displayプロパティをアニメーション化することはできません。

于 2012-12-02T09:40:17.420 に答える
7

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

于 2012-12-02T09:26:40.013 に答える
3

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

  • @Charmanderが指摘したように、-ms-transitionInternetExplorerではサポートされていません
  • Op10.5-12およびOpMobile10-12-o-transitionのプレフィックスが付いたOperaのベンダーもあります。これは、現在、グローバルブラウザの0.1％未満でサポートされている可能性があります。完成させるために入れます

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;
}​
于 2014-07-25T11:20:06.640 に答える
1

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

display: none;

/* and */

display: block;

使用する：

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

このプロパティを置き換えるので、任意のcss値を。でアニメーション化できますtransition。

実例： https ：//jsfiddle.net/utyja8qx/

于 2015-11-18T12:00:27.690 に答える