animationend startet nächste Funktion, nächste Funktionen animationend startet zweimal

Question

Ich mache einige interaktive Animationen mit HTML, CSS und Javascript + Jquery.

Ich habe mehrere Animationen, die ich ketten möchte. Wenn also die erste Animation gemacht wird, startet die nächste und so weiter.

Die erste Funktion wird durch einen Klick ausgelöst:

function stepOne() { 
    console.log(" stepOne ran"); 
    $('#myObject').attr('class', 'animation1'); 
    $(".animation1").on("animationend", stepTwo); 
} 

function stepTwo() { 
    console.log("stepTwo ran"); 
    $("#myObject").removeClass("animation1"); 
    $("#myObject").addClass("animation2"); 
    $("#scene").addClass("zoomAnimation"); 
    $("#scene").on("animationend", stepThree); 


    function stepThree() { 

// einigen spannenden Code hier console.log einfügen ("Abstürze"); }

Ich kann in der Konsole Protokoll sehen, dass es StepTwo und StepThree zur gleichen Zeit ausgeführt, und dann StepThree wieder, wenn die Animation tatsächlich endet. Wie verhindere ich, dass StepThree zusammen mit StepTwo ausgeführt wird? Dies ist nur ein Problem, wenn ich es in Folge ausführe. Wenn ich direkt zu StepTwo springe, gibt es kein Problem.

Answer 1

Nach vielen Stunden fand ich eine Arbeit herum.

Das Hinzufügen einer winzigen Verzögerung am Animationsendhörer am Ende der Funktion scheint die Lösung zu sein. So wird es

function stepTwo() { 
    console.log("stepTwo ran"); 
    $("#myObject").removeClass("animation1"); 
    $("#myObject").addClass("animation2"); 
    $("#scene").addClass("zoomAnimation"); 
    setTimeout(function() { 
    $(".zoomAnimation").on("animationend", stepThree); 
    }, 20); 

}

function stepThree() { 
$(".zoomAnimation").off("animationend", stepThree); 

}

und so weiter. Vielleicht nicht die beste Lösung, und kann mich Probleme auf der Straße kosten, aber es scheint richtig zu sein.