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

Mam więc następujące przejścia CSS dołączone do elementu 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; 
}

Czy istnieje sposób na wyłączenie tych dziedziczonych przejść na określonych elementach?

a.tags { transition: none; } 

Wydaje się, że nie wykonuje swojej pracy.

transition: noneWydaje się, że użycie programu jest obsługiwane (ze specjalną korektą dla Opery), biorąc pod uwagę następujący kod 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;
}

Demo JS Fiddle .

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

Specyficzna adaptacja do Opery polega na tym, że użycie jest -o-transition: color 0 ease-in;ukierunkowane na tę samą właściwość, jak określono w innych transitionregułach, ale ustawia czas przejścia do 0, co skutecznie zapobiega zauważaniu przejścia. Użycie a.noTransitionselektora polega po prostu na udostępnieniu określonego selektora dla elementów bez przejść.

Zredagowano, aby zauważyć, że odpowiedź @ Frédéric Hamidi , użycie all(przynajmniej w przypadku Opery) jest znacznie bardziej zwięzłe niż wyszczególnienie poszczególnych nazw właściwości, których nie chcesz mieć przejścia.

Zaktualizowano demo JS Fiddle, pokazujące użycie allw Operze:,-o-transition: all 0 none po samodzielnym usunięciu odpowiedzi @ Frédéric .

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

transition: color 0s;

(ponieważ przejście przez zero sekund oznacza to samo, co brak przejścia).

Innym sposobem usunięcia wszystkich przejść jest użycie unsetsłowa kluczowego:

a.tags {
    transition: unset;
}

W przypadku transition, unsetjest równoważne z initial, ponieważ transitionnie jest własnością dziedziczoną:

a.tags {
    transition: initial;
}

Czytelnik, który wie unseti initialmoże stwierdzić, że te rozwiązania są poprawne od razu, bez konieczności zastanawiania się nad szczegółową składnią transition.

Możesz także wydziedziczyć wszystkie przejścia wewnątrz elementu zawierającego:

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>

Oparta na domyślnej wartości przejścia W3schools to:, all 0s ease 0sktóra powinna być zgodnym z różnymi przeglądarkami sposobem wyłączenia przejścia.

Oto link: https://www.w3schools.com/cssref/css3_pr_transition.asp