动画结束在递归函数中不起作用

animationend not working in recursive function

本文关键字：不起作用 递归函数 结束 动画      更新时间：2023-09-26

我有一个函数，我想在下面使用它来循环访问存储在数组中的每个id，该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.');
            }
        }

您正在执行要分配处理程序的位置。

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

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

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

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

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

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

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

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

查看工作示例

相关文章：