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

117

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.

Scotty
źródło

Odpowiedzi:

166

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 .

David mówi, że przywróć Monikę
źródło
Ach, przed przejściem musiałem dodać tagi specyficzne dla przeglądarki. Wicked, na zdrowie!
Scotty,
Dzięki za operę, brak informacji o przejściu.
pedro_sland
5
Opera jest naprawdę nudna tą różnicą
Junior Mayhé
1
dlaczego nie możesz zrobić czegoś takiego: przejście: brak koloru, kolor tła 0.1s ułatwienie;
26

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

Will Madden
źródło
Performance stickler może poczuć się urażony, ale wydaje się to uzasadnione w przypadku wyłączania jednej właściwości.
doublejosh
Teraz nie działa dla mnie w Chrome. To po prostu wyłącza wszystkie odziedziczone przejścia.
Inwersja
Czy możesz podać przykład @Inversion
Will Madden
@WillMadden, tutaj jsfiddle.net/312bu8po wypróbuj stan początkowy, a następnie odkomentuj przygotowaną linię w css - przejście dla leftzostanie usunięte.
Inwersja
2

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.

Rory O'Kane
źródło
nieustawione i początkowe nie są dobrze obsługiwane przez IE
allenski
caniuse.com/#feat=css-unset-value - prawdopodobnie wybrałbym początkowe, jeśli potrzebujesz obsługi IE11.
Nick Middleweek
0

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>
wolny świat
źródło
2
Hmm, prawdopodobnie nie radziłbym robić tego w ten sposób. Reguła nie dotyczy elementu, do którego stosujesz klasę, tylko dzieci, i dotyczy każdego dziecka, nawet takiego, które nie wymaga zastosowania reguły, co może prowadzić do problemów ze specyfiką i skalowalnością w dalszej kolejności.
Scotty
Było to dla mnie bardzo przydatne ostatnio rozwiązanie do globalnego usuwania przejść z elementu mapy Google, które dodawały dziwności do zachowania mapy.
freeworlder