it-swarm.com.de

Geerbte CSS3-Übergänge deaktivieren/deaktivieren

Ich habe also folgende CSS-Übergänge an das Element a angehängt:

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

Gibt es eine Möglichkeit, diese ererbten Übergänge für bestimmte a-Elemente zu deaktivieren?

a.tags { transition: none; } 

Scheint nicht den Job zu machen.

108
Scotty

Die Verwendung von transition: none scheint (mit einer bestimmten Anpassung für Opera) mit folgendem HTML-Code zu unterstützen:

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

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

Getestet mit Chromium 12, Opera 11.x und Firefox 5 auf Ubuntu 11.04.

Die spezifische Anpassung an Opera ist die Verwendung von -o-transition: color 0 ease-in;, das auf dieselbe Eigenschaft abzielt, die in den anderen transition-Regeln angegeben ist, die Übergangszeit jedoch auf 0 setzt, wodurch der Übergang nicht wahrnehmbar wird. Die Verwendung des a.noTransition-Selektors dient einfach dazu, einen bestimmten Selektor für die Elemente ohne Übergänge bereitzustellen.


Editiert, um zu beachten, dass @ Frédéric Hamidis Antwort , die all (zumindest für Opera) verwendet, viel präziser ist, als jeden einzelnen Eigenschaftsnamen aufzulisten, den Sie nicht wechseln möchten.

Aktualisierte JS Fiddle -Demo, die die Verwendung von all in Opera zeigt: -o-transition: all 0 none , nachdem die Antwort von @ Frédéric gelöscht wurde.

155
David Thomas

Wenn Sie eine einzelne Übergangseigenschaft deaktivieren möchten, können Sie Folgendes tun:

transition: color 0s;

(da ein Übergang von null Sekunden mit keinem Übergang identisch ist.)

23
Will Madden

Eine andere Möglichkeit, alle Übergänge zu entfernen, ist das Schlüsselwort unset :

a.tags {
    transition: unset;
}

Im Fall von transition ist unset äquivalent zu initial , da transition keine vererbte Eigenschaft ist:

a.tags {
    transition: initial;
}

Ein Leser, der sich mit unset und initial auskennt, kann sofort feststellen, dass diese Lösungen korrekt sind, ohne sich über die spezielle Syntax von transition Gedanken machen zu müssen.

2
Rory O'Kane

Basierend auf W3schools ist der Standardübergangswert: all 0s ease 0s, der die Browser-kompatible Methode zum Deaktivieren des Übergangs sein sollte.

Hier ist ein Link: https://www.w3schools.com/cssref/css3_pr_transition.asp

0
Shota

Sie können auch alle Übergänge in einem enthaltenden Element auflösen:

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