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

}

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

animationend启动下一个函数，下一个函数animationend启动两次

1 个答案: