Désactiver / désactiver les transitions CSS3 héritées

117

J'ai donc les transitions css suivantes attachées à l'élément a:

a { 
     -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;  
     -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;  
     transition:color 0.1s ease-in, background-color 0.1s ease-in; 
}

Existe-t-il un moyen de désactiver ces transitions héritées sur des éléments spécifiques?

a.tags { transition: none; }

Ne semble pas faire le travail.

css transitions css-transitions Scotty
la source

Réponses:

166

L'utilisation de transition: nonesemble être prise en charge (avec un ajustement spécifique pour Opera) étant donné le HTML suivant:

<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>

... et CSS:

a {
    color: #f90;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a:hover {
    color: #f00;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;  
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;  
    transition:color 0.8s ease-in, background-color 0.1s ease-in; 
}
a.noTransition {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

Démo de JS Fiddle .

Testé avec Chromium 12, Opera 11.x et Firefox 5 sur Ubuntu 11.04.

L'adaptation spécifique à Opera est l'utilisation de -o-transition: color 0 ease-in;qui cible la même propriété que spécifiée dans les autres transitionrègles, mais définit le temps de transition sur 0, ce qui empêche effectivement la transition d'être perceptible. L'utilisation du a.noTransitionsélecteur consiste simplement à fournir un sélecteur spécifique pour les éléments sans transitions.

Édité pour noter que la réponse de @ Frédéric Hamidi , utiliser all(pour Opera, au moins) est beaucoup plus concis que de lister chaque nom de propriété individuel que vous ne voulez pas avoir de transition.

Mise à jour de la démo de JS Fiddle, montrant l'utilisation de alldans Opera:,-o-transition: all 0 none suite à la suppression automatique de la réponse de @ Frédéric .

David dit de réintégrer Monica
la source
Ahh, j'avais besoin d'ajouter les balises spécifiques au navigateur avant la transition. Méchant, bravo!
Scotty le
Merci pour l'opéra aucune information de transition.
pedro_sland
5
L'opéra est vraiment ennuyeux avec cette différence
Junior Mayhé
1
pourquoi ne pouvez-vous pas faire quelque chose comme: transition: color none, background-color 0.1s facilité d'entrée;
26

Si vous souhaitez désactiver une seule propriété de transition, vous pouvez faire:

transition: color 0s;

(puisqu'une transition de zéro seconde équivaut à aucune transition.)

Will Madden
la source
Un stickler de performance peut être offensé, mais cela semble légitime pour désactiver une seule propriété.
doublejosh
Cela ne fonctionne pas pour moi dans Chrome maintenant. Cela désactive simplement toutes les transitions héritées.
Inversion
Pouvez-vous donner un exemple @Inversion
Will Madden
@WillMadden, ici jsfiddle.net/312bu8po essayez l'état initial, puis décommentez la ligne préparée en css - la transition pour leftsera supprimée.
Inversion
2

Une autre façon de supprimer toutes les transitions consiste à unsetutiliser le mot - clé:

a.tags {
    transition: unset;
}

Dans le cas de transition, unsetéquivaut à initial, puisque transitionn'est pas une propriété héritée:

a.tags {
    transition: initial;
}

Un lecteur qui sait unsetet initialpeut dire que ces solutions sont correctes immédiatement, sans avoir à penser à la syntaxe spécifique de transition.

Rory O'Kane
la source
unset & initial ne sont pas bien pris en charge avec IE
allenski
caniuse.com/#feat=css-unset-value - J'irais probablement avec l'initiale si vous avez besoin du support IE11.
Nick Middleweek
0

Vous pouvez également déshériter toutes les transitions à l'intérieur d'un élément conteneur:

CSS:

.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}

HTML:

<a href="#">Content</a>
<a href="#">Content</a>
<div class="noTrans">
<a href="#">Content</a>
</div>
<a href="#">Content</a>
freeworlder
la source
2
Hmm, je ne conseillerais probablement pas de le faire de cette façon. La règle ne s'applique pas à l'élément auquel vous appliquez la classe, uniquement aux enfants, et elle s'applique à tous les enfants, même ceux qui n'ont pas besoin de l'application de la règle, ce qui pourrait entraîner des problèmes de spécificité et d'évolutivité plus tard.
Scotty
C'était une solution très utile pour moi récemment pour supprimer les transitions globalement d'un élément de carte Google, qui ajoutaient de l'étrangeté au comportement de la carte.
freeworlder