如何用forEach结合AnimeJS实现单个SVG的mouseleave独立动画

问题出在你选择动画目标时用了全局的"path"选择器，这会匹配页面上所有SVG路径元素，导致鼠标离开任意列表项时所有动画同时触发。只需修改动画目标，仅选中当前列表项内的路径即可：

修改后的JavaScript代码：

let hoverItem = document.querySelectorAll(".item");

hoverItem.forEach((line) => {
  line.addEventListener("mouseleave", function () {
    // 仅选中当前item内的path元素
    const targetPath = this.querySelector('path');
    anime
      .timeline({
        loop: false
      })
      .add({
        targets: targetPath,
        d: [
          { value: "M 10 80 Q 645 128 1290 80" },
          { value: "M 10 80 Q 645 11 1290 80" },
          { value: "M 10 80 Q 645 121 1290 80" },
          { value: "M 10 80 Q 645 34 1290 80" },
          { value: "M 10 80 Q 645 102 1290 80" },
          { value: "M 10 80 Q 645 65 1290 80" },
          { value: "M 10 80 Q 645 80 1290 80" }
        ],
        easing: "easeOutElastic(1, .6)",
        duration: 600
      });
  });
});

关键改动说明 #

• 在mouseleave事件回调中，通过this.querySelector('path')获取当前触发事件的.item元素内部的<path>节点，确保动画只作用于当前列表项的SVG路径。
• 将targets的值从全局选择器"path"替换为这个局部路径元素，实现独立触发动画的效果。

内容的提问来源于stack exchange，提问作者Pascal