Javascript 使用 forEach 为多个节点设置动画答案

【问题标题】：Javascript animate multiple nodes with forEachJavascript 使用 forEach 为多个节点设置动画
【发布时间】：2019-11-24 21:05:34
【问题描述】：

我正在尝试通过document.getElementsByClassName() 为多个帮助图标设置动画。我知道它返回一个类似对象的数组，它实际上是具有相同类的所有元素的节点列表，我也知道我可以通过附加我要访问的节点的index[4] 来访问各个项目。但是我不确定如何访问所有节点。我试过[*].animate()，但没有奏效。我还尝试了下面列出的forEach => 函数，但它仍然无法正常工作，我尝试了[0-8] 没有任何反应。

谁能发现我做错了什么？

我知道我可以将它包装在 for、while 或 forEach 循环甚至 switch 语句中，但这是我目前拥有的代码：

const infIco = document.getElementsByClassName('helpIco')[*].forEach(item =>{
    item.addEventListener('mouseover',(e) => {
        this.animate([
            { transform: 'scale(1)', opacity:1},
            { transform: 'scale(1.42) rotate(22deg)', opacity: .8},
            { transform: 'scale(1)', opacity: 1},
                ], {
                duration: 1560,           // ms
                easing: 'ease-in-out',    // 'linear', bezier curve, etc..cubic-bezier(.43,.95,.85,.14)
                delay: 4,                 // ms
                iteration: Infinity,      // Or number
                direction: 'normal',      // 'normal', 'reverse' etc...
                fill: 'forwards'          // 'backwards', 'both', 'none', 'auto.'
        })
      // Todo...
    })
});

我知道.animate() 部分正在工作，因为我也将它附加到另一个项目并且它工作正常。有时可能会有点小故障，但这很可能是由于使用了旧显卡和杂乱无章的计算机。

【问题讨论】：

标签： javascript animation dom-events mouseover

【解决方案1】：

您可以使用Array.from( list ) 方法或... 扩展运算符，
从节点列表中创建一个实际的数组：

Array.from( document.getElementsByClassName('helpIco') ).forEach( function(){ /*...*/ });

[ ...document.getElementsByClassName('helpIco') ].forEach( function(){ /*...*/ });

但是getElementsBy... 返回一个«live» 列表，如果使用了其中的任何元素，该列表每次都会更新...在大多数情况下，最好使用querySelectorAll('.class-with-dot')。它只收集一次节点列表，并具有内置的 forEach 方法。

【讨论】：

Array.from() 非常有问题，但我会尝试关闭所有后台任务和 vlc 播放器.. 也可能是我在项目上的 css 浮动。不过感谢您提供的信息。

【解决方案2】：

箭头函数和这种意识？胖箭头函数根本不知道这一点，将使用全局范围。所以请我尽量不要使用箭头功能。那么我确实建议使用 itterable 中的扩展运算符 [...elem]。如果您希望在使用 querySelectorAll 进行选择后对其进行所有迭代，这将在使用 I 时为您提供每个元素，例如 for ... in 或 for ... of

【讨论】：