Wie man ein- und ausblendet ein CSS "nach" Pseudo-Element beim Hinzufügen oder Entfernen einer Klasse

Question

Ich weiß, es gibt eine Menge anderer Fragen über die Verwendung von Übergängen auf CSS-Pseudo-Element, aber nachdem ich durch eine ganze Reihe von ihnen gehe ich noch kann mein Szenario nicht funktionieren lassen.

Grundsätzlich möchte ich eine Klasse zu einem Element hinzufügen, die Klasse hat eine: nach Pseudo-Element mit etwas Inhalt und einem Hintergrund. Ich möchte einen verblassenden Effekt auf das Element: after, wenn die Klasse hinzugefügt oder entfernt wird.

Ich habe dies versucht, in diesem jsfiddle und der Code Ich habe es so weit dies:

HTML

<div id="divA">Div test</div> 
<button id="btnAdd">Add it</button> 
<button id="btnRemove">Take Away</button> 

CSS

div { 
    width: 200px; 
    transition: all .5s linear; 
    background: red; 
} 

.test{ 
    background: blue; 
} 

.test:after{  
    background: #0c0; 
    content: "Test"; 
} 

jQuery

$("#btnAdd").click(function() { 
    $("#divA").addClass("test"); 
}); 

$("#btnRemove").click(function() { 
    $("#divA").removeClass("test"); 
}); 

Jede Hilfe und Hinweise würden am meisten geschätzt.

Answer 1

Forking @ NilsKaspersson Antwort, damit es mit Ihren Anforderungen arbeiten.

Übergang bedeutet von X zu Y, Sie können nicht erwarten, dass es mit neu erstellten Attributen arbeitet.

Dann müssen Sie ein initiales Attribut erstellen und später ändern.

Da Sie wollen es nicht von Anfang an dabei zu sein, verwenden Sie einfach color: transparent; und background: transparent;

Running Demo

Code:

div { 
    width  : 200px; 
    transition : all .5s linear; 
    background : red; 
} 

div:after { 
    transition : all .5s linear; 
    background : transparent; 
    color  : transparent; 
    content : "Test"; 
} 

.test{ 
    background : blue; 
} 

.test:after{ 
    background : #0c0; 
    color  : black; 
} 

Answer 2

Bearbeiten: Ändern der Antwort basierend auf neuen Geige.

In den meisten Fällen muss der CSS-Übergang auf bereits definierte Eigenschaften angewendet werden.

Zusätzlich wird durch die Änderung eines Pseudo :after Elements content das Element entfernt und neu hinzugefügt, wodurch die genannten Eigenschaften zur gleichen Zeit entfernt werden.

Ich habe eine Demo mit animieren den Text color und background-color während der Voreinstellung der content gemacht, so dass die Eigenschaften bereits vorhanden sind.

CSS:

div { 
    width: 200px; 
    transition: all .5s linear; 
    background: red; 
} 
div:after { 
    transition: all .5s linear; 
    background: red; 
    color: red; 
    content: 'Test'; 
} 
.test{ 
    background: blue; 
} 
.test:after{ 
    background: #0c0; 
    color: black; 
} 

Fiddle: http://jsfiddle.net/W5e9Q/10/

Answer 3

Es gibt zwei Dinge hier los ist.

1.) transition funktioniert nur, wenn etwas zu von zu übergang ist. Da Ihr :after -Element im Wesentlichen erstellt wird, wenn die Klasse hinzugefügt wird, gibt es keinen Übergang.

2.) transition erbt nicht, also müssen Sie es noch einmal für das Pseudoelement deklarieren.

Here's a quick n' dirty fork of your JSFiddle.

Ich habe die generischen Regeln für das Pseudo-Element in die klassenlose div verschoben und eine transition hinzugefügt. Wenn dann die Klasse test hinzugefügt wird, ändert sich der Hintergrund und es kann von seinem alten Wert übergehen.

Wenn Sie nicht möchten, dass das Pseudoelement des content sichtbar sein die ganze Zeit, betrachten es mit opactiy: 0 und Übergang zu verstecken, dass zu 1, oder verwenden Sie den transparent Farbwert für background und/oder color.