javascript - animationend 开始下一个函数，next functions animationend 开始两次

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？如果我按顺序运行它，这只是一个问题。如果我直接跳到 stepTwo 就没有问题。

Answer 1

几个小时后，我找到了解决方法。

在函数末尾的 animationend 监听器上添加一个微小的延迟似乎是解决方案。于是就变成了

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

等等。可能不是最好的解决方案，可能会给我带来麻烦，但这似乎是正确的。