css3 Transition Verzögerung, wenn animierte Svg füllen und gleichzeitig Farbe Fehler in Chrome funktioniert in FF

Question

Ich habe einen Link mit einem Inline-Svg und einem Text. Ich möchte animieren: hover (oder eine .active-Klasse hinzufügen), aber in Chrome wird der Übergang nicht gleichzeitig ausgeführt. Auf Firefox läuft alles einwandfrei. Hier ist die Demo:

[DEMO](http://codepen.io/anon/pen/QNvgvy) 

Gibt es jemanden, der eine Lösung für dieses Problem kennt? Vielen Dank!

Answer 1

Ich denke, was hier passiert ist der Unterschied zwischen FF und Chrome in der Art und Weise, wie geerbt css während der Übergangsphase propagiert wird. FF tut dies sofort, während Chrome einen neuen Stilwert nur dann auf ein untergeordnetes Element anwendet, wenn der Übergang für das übergeordnete Element abgeschlossen ist.

Schauen Sie sich dieses Beispiel an: https://jsbin.com/koruyeludi/1/edit?html,css,js,console,output und behalten Sie die Farbwerte im Auge, die in der Konsole gedruckt werden, wenn Sie den Mauszeiger halten.

Beispiel hat 2 Spannen, .child ist in .parent verschachtelt. Beide haben einen Übergang auf sie angewendet. Wenn Sie den Mauszeiger über den übergeordneten Bereich bewegen, wird die Farbe schrittweise geändert. Sobald der Übergang für das übergeordnete Element erfolgt ist, wird die Farbe am untergeordneten Knoten geändert. Und da es auch einen Übergang hat, kommt es jetzt ins Spiel.

Also in Ihrem Beispiel haben Sie * { transition: all 1s; }. Übergeordnet <a> wird während [0s-1s] Intervall im Farbübergang sein. <span> und <svg> ändern ihre Farbe während [1s-2s]. Und <path> wird eine Änderung in [2s-3s] vornehmen. Um dies zu vermeiden, wenden Sie transition: nur einmal - auf Root-Element <a> Element.