Wyłącz/wyłącz odziedziczone przejścia CSS3

Question

Więc mam następujący CSS Transitions przymocowana do elementu:

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

Czy istnieje sposób, aby wyłączyć te odziedziczone przejścia na konkretne ciągu elementów?

a.tags { transition: none; } 

Nie wydaje się, że wykonuje to zadanie.

Answer 1

Zastosowanie transition: none wydaje się być obsługiwane (ze szczególnym uwzględnieniu Opera), biorąc pod uwagę następujące HTML:

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

... i 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.

Testowane przy pomocy Chromium 12, Opera 11.x i Firefox 5 na Ubuntu 11.04.

Specyficzny adaptacja do Opery jest wykorzystanie -o-transition: color 0 ease-in; który atakuje te same właściwości jak określone w innych transition zasad, ale ustawia czas przejścia do 0, który skutecznie zapobiega przejście od bycia zauważalne. Użycie selektora a.noTransition polega po prostu na zapewnieniu określonego selektora dla elementów bez przejść.

---

Zmieniano, aby pamiętać, że @Frédéric Hamidi's answer korzystając all (dla Opery, przynajmniej) jest znacznie bardziej zwięzły niż wystawianie się każdą indywidualną nazwę właściciela, że ​​nie chce mieć przejście.

Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none, po samodzielnym usunięciu odpowiedzi .

Answer 2

Jeśli chcesz wyłączyć jedną właściwość przejścia, można zrobić:

transition: color 0s; 

(od zero sekund przejście jest taka sama jak bez przejścia).

Answer 3

Można również wydziedziczyć wszystkie przejścia wewnątrz Element zawierający:

CSS:

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

HT ML:

<a href="#">Content</a> 
<a href="#">Content</a> 
<div class="noTrans"> 
<a href="#">Content</a> 
</div> 
<a href="#">Content</a>