動畫結束啓動下一個功能，下一個功能動畫結束兩次啓動

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

}

等。可能不是最好的解決方案，並且可能會讓我在路上遇到問題，但似乎是正確的。