html - CSS3トランジションをなしに設定するにはどうすればよいですか?

Question

CSS トランジションがメディアクエリ内またはその他の場合に機能しないようにするにはどうすればよいですか? 例えば：

@media (min-width: 200px) {
    element {
        transition: width 1s;
    }   
}

@media (min-width: 600px) {
    element {
        transition: none; // SET TO NO TRANSITION
    }   
}

Answer 1

transition-propertyをnoneに設定できます。このように、遷移効果は適用されません。

このような：

-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;

Answer 2

transition-propertyをnoneに設定するよりも、transition-durationを0sに設定する方が良いでしょう。

これは、クロスブラウザー コードです。

-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;

なぜこれが良いのですか？デフォルトでは、標準に準拠したブラウザー (Firefox など)は、要素ごとにtransition-propertyをallに設定するためです。また、transition-durationを0sに設定します。したがって、transition-durationを0sに設定することで、ブラウザーがトランジションなしで要素を定義する方法に最も近いものになります。

transition-durationをデフォルトの0に設定すると、transition-propertyは無関係になります。