9

単一のスタイルに対して CSS トランジションを有効にするのは非常に簡単ですが、単一のスタイルに対してそれらを無効にすることは可能ですか?

シングル スタイル トランジションの通常の方法は次のとおりです。

div
{
    transition: opacity 0.5s;
}

しかし、私がやりたいのは、グローバル トランジションを設定してから、単一のプロパティに対して無効にすることです。たぶん、このようなものですか？

div
{
    transition: 0.5s opacity 0s;
}

それは何らかの方法で可能ですか？

編集 要素のすべてのトランジションを無効にしたくない、要素の 1 つのトランジションを無効にしたい。つまり、不透明度を除いてすべてのプロパティを移行する必要があります。

デモ用のフィドルは次のとおりです: http://jsfiddle.net/jakelauer/QSJXV/

4

3 に答える 3

15

その 1 つのプロパティに非常に短い transition-duration を設定することで、必要な動作をエミュレートできるようです ( fiddle を参照)。

transition: all 3s ease, background-color .01s linear;
于 2013-08-14T17:53:45.673 に答える
5

私はこれを解決しました。例: http://jsfiddle.net/jakelauer/QSJXV/1/

コンマが欠けていたことを除けば、思ったとおりに機能します。正しいコード例:

transition: 0.5s, opacity 0s;
-webkit-transition: 0.5s, opacity 0s;
于 2013-08-14T17:53:03.160 に答える
0

:not 擬似セレクターを使用して、トランジションを持たないクラスでマークした要素を除外できます。

div {
  opacity: 1.0;
  ...
  -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
          transition: all 0.5s;
}

// Change state for example
div:hover:not(.disable-transition) {
  opacity: 0.5;
}

.disable-transition {
   // Manually maintain the opacity so there is no change
   opacity: 1.0;
}
于 2013-08-14T17:34:30.633 に答える