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
    }   
}
31
shrewdbeans

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

このような:

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

transition-propertynoneに設定するよりも、transition-durationsに設定するよりも優れています。

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

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

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

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

5
RockPaperLizard
transition: width 0s

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

2
Andrew Dover