Deaktivieren / Deaktivieren von geerbten CSS3-Übergängen

117

Ich habe also die folgenden CSS-Übergänge an das a-Element 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 geerbten Übergänge für bestimmte Elemente zu deaktivieren?

a.tags { transition: none; } 

Scheint den Job nicht zu machen.

Scotty
quelle

Antworten:

166

Die Verwendung von transition: nonescheint angesichts des folgenden HTML-Codes unterstützt zu werden (mit einer speziellen Anpassung für Opera):

<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 unter Ubuntu 11.04.

Die spezifische Anpassung an Opera ist die Verwendung, -o-transition: color 0 ease-in;die auf dieselbe Eigenschaft wie in den anderen transitionRegeln abzielt, jedoch die Übergangszeit auf festlegt 0, wodurch effektiv verhindert wird, dass der Übergang wahrgenommen wird. Die Verwendung des a.noTransitionSelektors besteht einfach darin, einen spezifischen Selektor für die Elemente ohne Übergänge bereitzustellen.


Bearbeitet, um zu beachten, dass die Antwort von @ Frédéric Hamidi mit all(zumindest für Opera) weitaus prägnanter ist, als jeden einzelnen Eigenschaftsnamen aufzulisten, für den Sie keinen Übergang wünschen.

Aktualisierte JS Fiddle-Demo, die die Verwendung von allin Opera zeigt:-o-transition: all 0 none nach dem Selbstlöschen der Antwort von @ Frédéric .

David sagt, Monica wieder einsetzen
quelle
Ahh, ich musste vor dem Übergang die browserspezifischen Tags hinzufügen. Böse, Prost!
Scotty
Danke für die Oper keine Übergangsinfo.
pedro_sland
5
Opera ist wirklich langweilig mit diesem Unterschied
Junior Mayhé
1
Warum kannst du nicht so etwas tun wie: Übergang: Farbe keine, Hintergrundfarbe 0,1s Easy-In;
26

Wenn Sie eine einzelne Übergangseigenschaft deaktivieren möchten, haben Sie folgende Möglichkeiten:

transition: color 0s;

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

Will Madden
quelle
Ein Performance-Stickler kann Anstoß nehmen, aber dies scheint legitim zu sein, um eine einzelne Eigenschaft zu deaktivieren.
DoubleJosh
In Chrome funktioniert das jetzt nicht. Dadurch werden nur alle geerbten Übergänge deaktiviert.
Inversion
Können Sie ein Beispiel geben @Inversion
Will Madden
@ WillMadden, hier versucht jsfiddle.net/312bu8po den Anfangszustand und kommentiert dann die vorbereitete Zeile in CSS - Übergang für leftwird entfernt.
Inversion
2

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

a.tags {
    transition: unset;
}

Im Fall von transition, unsetentspricht initial, da transitionnicht eine erbliche Eigenschaft ist:

a.tags {
    transition: initial;
}

Ein Leser, der weiß unsetund erkennen initialkann, dass diese Lösungen sofort korrekt sind, ohne über die spezifische Syntax von nachdenken zu müssen transition.

Rory O'Kane
quelle
unset & initial werden mit IE
allenski
caniuse.com/#feat=css-unset-value - Ich würde wahrscheinlich mit initial beginnen, wenn Sie IE11-Unterstützung benötigen.
Nick Middleweek
0

Sie können auch alle Übergänge innerhalb eines enthaltenen Elements enterben:

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>
Freeworlder
quelle
2
Hmm, ich würde wahrscheinlich nicht empfehlen, es so zu machen. Die Regel gilt nicht für das Element, auf das Sie die Klasse anwenden, sondern nur für die untergeordneten Elemente. Sie gilt auch für alle untergeordneten Elemente , auch für diejenigen, für die die Anwendung der Regel nicht erforderlich ist. Dies kann später zu Problemen mit der Spezifität und Skalierbarkeit führen.
Scotty
Dies war kürzlich eine sehr nützliche Lösung für mich, um Übergänge global aus einem Google-Kartenelement zu entfernen, wodurch das Kartenverhalten merkwürdiger wurde.
Freeworlder