web-dev-qa-db-ja.com

CSS3トランジションをなしに設定します

CSSトランジションがメディアクエリ内で動作しないようにするには、どうすればよいですか？例えば：

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

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

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

このような：

-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
60
Christofer Vilander

transition-propertyをnoneに設定するよりも、transition-durationをsに設定するよりも優れています。

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

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

なぜこれが良いのですか？なぜなら、デフォルトでは、標準に準拠したブラウザー（Firefoxなど）が各要素に対してtransition-propertyをallに設定するためです。また、transition-durationをsに設定します。したがって、transition-durationをsに設定することにより、ブラウザーが遷移なしで要素を定義する方法に最も密接に一致します。

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

5
RockPaperLizard
transition: width 0s

トリックを行う必要があります-それは基本的に遷移があると言っているので、0はそれを見るには速すぎます！

2
Andrew Dover