Es gab einen langjährigen Bug in WebKit, dass Pseudo-Elemente (wie ::before und ::after) nicht animiert oder mit Übergängen versehen werden konnten. Seit gestern ist dieser Bug dank Elliott Sprehn behoben. Sie können Google Chrome Canary öffnen und sehen, wie sie funktionieren.
Er bemerkt im Ticket
Die neuen DOM-basierten :before und :after Pseudo-Elemente unterstützen bereits Animationen und Übergänge, aber ich hatte die Unterstützung deaktiviert, damit wir sie in einem separaten Schritt aktivieren können.
DOM-basiert, hm? Ich frage mich, was das genau bedeutet. Können wir ihnen zum Beispiel Events zuweisen? Ich sehe sie in den Chrome-Entwicklertools nicht anders. Wenn jemand es weiß, lasst es mich wissen.
Zur Information: Firefox unterstützt dies schon ewig. Safari wird es wahrscheinlich unterstützen, sobald sie das nächste Mal aktualisieren (sie sind die langsamsten aller Browser bei Updates). Noch keine Unterstützung in Opera. Ich bin mir nicht sicher, wie sich diese Art von Dingen auf mobilen WebKit auswirkt.
IE 10 unterstützt Animationen auf Pseudo-Elementen. Übergänge ebenfalls, aber mit einer seltsamen Einschränkung.
.x:hover:before { /* By itself, doesn't work */ }
.x:hover {}
.x:hover:before { /* This works (needs :hover declared) */ }Video, das dies demonstriert von Caleb Kester.
Ich habe diese Tabelle glücklich aktualisiert.
Ich benutze Chrome Canary 26.0.1373.0 und sehe keine Animationen oder Übergänge. Muss ich etwas konfigurieren oder wurde die neueste Version von Canary einfach noch nicht auf mich gepusht?
Hallo James, es sollte sofort funktionieren. Bei mir tut es das.
James, ich hatte das gleiche Problem. Gehe zu Optionen -> Über Google Chrome und hoffe, dass es nach einer neueren Version sucht. Es hat bei mir etwas gedauert, sie zu finden, und dann wurde ich aufgefordert, die neue Version neu zu starten.
Wie erwähnt, funktioniert es auch in Firefox, also öffnen Sie Firefox ebenfalls, um es zu sehen.
Ich bin froh, dass das endlich funktioniert. Ich habe versucht, ein animiertes Pseudo-Element auf meiner Portfolio-Website vor ein paar Monaten zu implementieren, musste aber zu einem tatsächlichen HTML-Element wechseln, da es den WebKit-Bug gab. Hoffentlich wird er bald auf den stabilen Chrome-Kanal übertragen.
Glücklicherweise gilt dieser Fix auch für `display: box` und `box-ordinal-group`-Neuordnung, bei denen der `:before`-Inhalt über dem ersten Kind-Element feststeckte, selbst wenn er neu positioniert wurde.
Demo
Huzzah! Ich habe sie in Dinge eingebaut (z. B. die Navigation auf meiner Website), nur um es zu tun, obwohl es zu der Zeit nur in Firefox funktionierte. Die Zustände ändern sich immer noch, wie man es erwarten würde, sie haben nur keine Übergänge, also war ich vorsichtig, es nur mit Dingen zu tun, die keinen Übergang für die Bedeutung benötigten: der Endzustand reichte aus. Das heißt, wenn alles gut geht, wird es in WebKit einfach funktionieren, sobald es in den stabilen Build integriert ist. Also sage ich wieder "Huzzah!"
Das sind exzellente Neuigkeiten. Ich hatte vor einiger Zeit vor, Pseudo-Elemente für subtile Übergangshinweise in unserer Benutzeroberfläche zu verwenden, musste es aber aufgeben, da ich nicht sauber animieren konnte. Ich freue mich darauf, damit herumzuspielen!
Das sind RIESIGE Neuigkeiten. Ich warte seit Jahren darauf, danke an das Chrome-Entwicklerteam!
WOOT. Ich bin vor einer Weile auf dieses Problem gestoßen und war ziemlich genervt davon. Aber ich habe beschlossen, meinen Code trotzdem einfach laufen zu lassen.
Super aufgeregt deswegen. Eröffnet viele großartige Möglichkeiten!
"DOM-basiert, hm? Ich frage mich, was das genau bedeutet" -> Tatsächlich bedeutet es, dass wir sie im Hintergrund als normale DOM-Knoten implementieren (um es einfach zu machen), aber es ist nicht für die Öffentlichkeit zugänglich, da Pseudo-Elemente nicht zugänglich sind (genau wie heute). Es ist ein Implementierungsdetail, wie wir damit in WebKit umgehen, aber es sollte für Benutzer keine Rolle spielen. Ich hoffe, das hilft.
Habe den Codepen auf Chrome Android ausprobiert: nein. Animation.
Was
Ein Jahr später und es ist schon wieder kaputt? Der Animationspart im Codepen funktioniert in Chrome 32.0.1700.107 und Chrome auf Android nicht :-( In Firefox funktioniert es aber.
Was ist da los?