CSS-Klassen Werte in Javascript auslesen?

[Rolf B]

Hallo Rudolph,

in deinem konkreten Fall mag das erwünscht sein. Aber versteife Dich bitte nicht auf das Auslesen der Rules und deren Interpretation. Das kann schnell komplex werden. Du sprichst ja selbst von konsekutiven und parallelen Aktionen. Was ist mit

#foo .animation { transition: ... 3s ...; }
#bar .animation { transition: ... 2s ...; }

Hier reicht die Suche nach "animation" nicht - die reicht sowieso nicht:

.no-animation { transition: none; }
.animationDemo { transition: ...4s...; }

oder noch schlimmer - das schmeißt auch Gunnar aus der Kurve:

#foo :not(.animation) { ... }

Mit anderen Worten: Damit dein JS funktioniert, musst Du Dir genaue Regeln setzen, wie Du dein CSS gestalten darfst. Not Good, wie Happy Quinn zu sagen pflegt.

Ich gehe davon aus, dass Du für deine Synchronisierungen das Animationsverhalten eines konkreten Elements betrachten musst, und dann ist window.getComputedStyle(element) auf jeden Fall die bessere Lösung.

Anstatt Dir das Animationstiming aus den CSS Rules zusammenzufrickeln, könntest Du auch die entsprechenden Events nutzen: transitionrun, transitionstart und transitionend. Damit bekommst Du Bescheid, wenn was passiert, und musst es nicht ausrechnen. Unser Wiki scheint dazu nichts zu haben, aber bei MDN gibt's Beispiele und Referenzinformationen.

Wenn es um parallele Aktionen geht, kann man das ggf. auch durch das Teilen von Animationen in mehrere Abschnitte per Event steuern - aber da muss nicht funktionieren.

Und es gibt außer Transitionen auch noch die Animationen. Auch die haben Events, und mit keyframes geht viel mehr als mit einfachen Transitionen.

Im allerübelsten Fall animiert man doch per JavaScript und requestAnimationFrame, aber das ist wirklich nur die letzte Rettung wenn man die Synchro gar nicht anders hinbekommt.

Rolf