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

Question

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

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; 
}

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

a.tags { transition: none; }

Ne semble pas faire le travail.

105

css css-transitions css3 transitions

demandé sur Scotty 2011-07-09 15:33:28

4 réponses

score 154 · Answer 1

l'utilisation de transition: none semble être supportée (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;
}

js Fiddle demo .

Testé avec du chrome 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 vise la même propriété que spécifié dans les autres règles transition , mais fixe le temps de transition à 0 , ce qui empêche effectivement la transition d'être perceptible. L'utilisation du sélecteur a.noTransition ne sert qu'à fournir un sélecteur spécifique pour les éléments sans transition.

édité pour noter que la réponse de @Frédéric Hamidi , en utilisant all (pour L'Opéra, au moins) est beaucoup plus concise que d'énumérer chaque propriété individuelle-nom que vous ne voulez pas avoir de transition.

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

score 20 · Answer 2

si vous voulez désactiver une propriété de transition simple, vous pouvez faire:

transition: color 0s;

(puisqu'une transition de zéro seconde est la même chose qu'aucune transition.)

score 2 · Answer 3

une autre façon de supprimer toutes les transitions est avec le unset mot clé:

a.tags {
    transition: unset;
}

dans le cas de transition , unset est équivalent à initial , puisque transition n'est pas un bien hérité:

a.tags {
    transition: initial;
}

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

score 0 · Answer 4

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

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>

Las etiquetas más populares

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

4 réponses