web-dev-qa-db-fra.com

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

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.

csscss3transitionscss-transitions
108
Scotty

L'utilisation de transition: none semble être prise en charge (avec un ajustement spécifique pour Opera) étant donné le code 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 celle spécifiée dans les autres règles transition, mais définit le temps de transition sur 0, ce qui empêche effectivement la transition d'être visible. L'utilisation du sélecteur a.noTransition consiste simplement à fournir un sélecteur spécifique pour les éléments sans transitions.

Edited pour noter que @ La réponse de Frédéric Hamidi , en utilisant all (pour Opera, au moins) est beaucoup plus concise que de lister chaque nom de propriété que vous ne souhaitez pas modifier.

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

155
David Thomas

Si vous souhaitez désactiver une propriété de transition unique, vous pouvez effectuer les opérations suivantes:

transition: color 0s;

(puisqu’une seconde transition égale à zéro ne correspond à aucune transition.)

23
Will Madden

Un autre moyen de supprimer toutes les transitions est d'utiliser le mot clé unset :

a.tags {
    transition: unset;
}

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

a.tags {
    transition: initial;
}

Un lecteur qui connaît unset et initial peut dire que ces solutions sont correctes immédiatement, sans avoir à réfléchir à la syntaxe spécifique de transition.

2
Rory O'Kane

La valeur de transition par défaut de W3schools est la suivante: all 0s ease 0s, ce qui devrait être le moyen compatible entre plusieurs navigateurs pour désactiver la transition.

Voici un lien: https://www.w3schools.com/cssref/css3_pr_transition.asp

0
Shota

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>
0
freeworlder