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

时间:2017-04-13 13:21:05

标签: javascript jquery css css-animations

我正在使用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那就没有问题了。

1 个答案:

答案 0 :(得分:0)

经过几个小时,我找到了一份工作。

在函数结束时在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);

}

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