Question

我有下面的函数，我想用它来遍历存储在数组中的每个id，它指向我添加到div的动态HTML元素。然后，我想更改CSS类并添加一个animationend事件侦听器。这一切都有效，除了我注意到事件在动画完成之前被触发。最终发生的是阵列中的所有元素立刻生成动画。我希望每个元素都能连续播放动画。我一直在玩代码并在网上寻找答案，但我被困住了。有什么想法吗？

Javascript代码：

        function moveLines(count){
            if(count<=introLinesBlurEls.length){
                thisMoveLine = document.getElementById(introLinesBlurEls[count]);
                thisMoveLine.className = 'introImgBlurAnimate';
                count++;
                thisMoveLine.addEventListener('animationend', moveLines(count), false);
            }else{
                alert('Hey. I am done.');
            }
        }

Answer 1

首先，不同浏览器中的动画事件可能有不同的名称：webkitAnimationEnd，animationend，MSAnimationEnd，例如：对于我来说，仅限铬webkitAnimationEnd正常工作。因此最好为所有这些绑定处理程序（您可以为此创建单个函数）。

另外，为了正确地将count参数传递给事件处理程序，您应该使用匿名函数，或者将count变量移动到全局范围，并在没有参数的情况下调用moveLines。

当你把这个＆＃39; moveLines（count）＆＃39;作为addEventListener的第二个参数，您实际上立即调用moveLines函数并将其结果传递给addEventListener，而不是传递函数本身。

见工作example

Answer 2

您正在执行您要在其中分配的处理程序。

thisMoveLine.addEventListener('animationend', moveLines(count), false);

这是执行moveLines（）。您需要推迟执行moveLines直到事件发生。为此，您需要创建一个闭包，以便绑定count参数。

thisMoveLine.addEventListener('animationend', moveLines.bind(this, count), false);

您可以使用.bind（）或将其包装在函数中以保留范围

thisMoveLine.addEventListener('animationend', function(){ moveLines(count); }, false);

animationend不在递归函数中工作

2 个答案: