web-dev-qa-db-fra.com

Définissez une transition CSS3 sur aucune

Comment pourrais-je faire en sorte qu'une transition CSS ne fonctionne pas dans une requête multimédia, ou dans tout autre cas? Par exemple:

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

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

Vous pouvez définir transition-property sur none. De cette façon, aucun effet de transition ne sera appliqué.

Comme ça:

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

Encore mieux que de définir transition-property to none is setting transition-duration to s.

Voici le code multi-navigateur:

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

Pourquoi est-ce mieux? Parce que, par défaut, les navigateurs conformes aux normes (tels que Firefox) définissent transition-property à all pour chaque élément. Ils définissent également transition-duration à s. Ainsi, en définissant transition-duration à s, vous correspondez le plus étroitement à la façon dont le navigateur définit un élément sans transition.

La définition de transition-duration sur la valeur par défaut s rend la transition-property non pertinente.

5
RockPaperLizard
transition: width 0s

Devrait faire l'affaire - car il dit essentiellement qu'il y a une transition, mais 0 est trop rapide pour le voir!

2
Andrew Dover