动画结束启动下一个功能，下一个功能动画结束两次启动

Question

我正在做一些使用HTML，CSS和Javascript + Jquery的交互式动画。

我有几个动画，我想链。所以当第一个动画完成时，下一个开始，等等。

第一个功能是通过点击触发：

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() { 

//此处插入一些令人兴奋的代码 的console.log（ “崩溃”）; }

我可以在控制台日志中看到，它同时运行stepTwo和stepThree，然后在动画实际结束时再次运行StepThree。如何防止它与stepTwo一起运行stepThree？如果我按顺序运行它，这只是一个问题。如果我直接跳到步骤二没有问题。

Answer 1

几个小时后，我找到了一个工作。

在函数结尾处在动画结束处添加一个微小的延迟似乎是解决方案。 所以它成为

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); 

}

等。可能不是最好的解决方案，并且可能会让我在路上遇到问题，但似乎是正确的。