Hallo allerseits!

Am besten ich veranschauliche mein Problem an einem kleinen Beispiel:

Stellen wir uns einen simplen Ladebalken vor, der aus drei div-Elementen besteht.

<div id="ladebalken">
 <div id="fortschrittsbox">
  <div id="fortschritt">
  </div>
 </div>
</div>

Nehmen wir nun an, der #ladebalken und der #fortschritt haben jeweils eine eigene
CSS-Animation.

Der #fortschritt soll die #fortschrittsbox füllen und im Anschluss soll der #ladebalken
samt Inhalt geschmeidig auf {opacity: 0;} und danach das ganze Ding auf {display: none;}
gesetzt werden.

Der erste Ansatz wäre (für jemand wie mich, der keine Ahnung von JS hat), der Folgende:

var ladebalken = document.getElementById("ladebalken");
var fortschritt = document.getElementById("fortschritt");

fortschritt.addEventListener("animationend", fortschrittkomplett);
function fortschrittkomplett()
{ladebalken.style.animationPlayState = "running";};

ladebalken.addEventListener("animationend", ladebalkenkomplett);
function ladebalkenkomplett()
{ladebalken.style.display = "none";};

Das Problem ist nun, dass es für den Event Listener offenbar keinen Unterschied macht,
ob eine CSS-Animation direkt bei dem angesprochenen div-Element passiert, oder bei
einem - demselben div-Element untergeordneten - div-Element.

Das heißt in diesem Beispiel würde der EventListener für den #ladebalken automatisch
auch auf das Ende der Animation des #fortschritts reagieren.

Was bei diesem simplen Beispiel noch einigermaßen unproblematisch zu umgehen ist,
wächst sich bei komplexeren Modellen doch zu einem echten Ärgernis aus.

Speziell wenn eine Kette von Ereignissen (Animationen) in Gang zu setzen ist und
bei den davon betroffenen Elementen einige ineinander verschachtelte div-Elemente sind,
bleiben soweit ich das überblicke nur zwei Optionen:

Statt die einzelnen Animationen und Funktionen mit dem EventListener aneinander zu knüpfen,
müsste man sie mit der (eher weniger präzisen) Timeout-Function hintereinanderschalten,

oder

man müsste von vorneherein verhindern, dass mit CSS animierte div-Elemente ineinander
verschachtelt sind, und die Elemente statt dessen mittels z-index übereinanderlegen,
was aber unter Umständen wiederum ultra umständlich wäre, da jedes "Kind"-Element ja
dann auch zusätzlich die Animation des "Eltern"-Elementes nachvollziehen müsste.

Meine Frage also an diejenigen, die mehr wissen als ich:

Ist es möglich den EventListener so einzustellen, dass er tatsächlich nur auf das
div-Element "hört", dass im script angegeben ist, also, um im Beispiel zu bleiben,
bei ladebalken.addEventListener("animationend", xyz); eben NUR auf #ladebalken zu hören,
und dabei #fortschritt zu ignorieren???

Falls es da eine elegante Methode gäbe, wäre das eine große Erleichterung!

Dank im Voraus und

Gruß,

Roadster.