我仔细看了你的代码，导致动画没生效的核心原因是anime.js的配置属性拼写错误——你写的是target，但正确的属性名应该是targets（复数形式），这是anime.js API的必填选项，单数的target会被库忽略，自然不会触发动画。

除此之外，我也帮你优化了代码的可读性，同时确认了事件绑定的作用域问题（你用let current_button的写法是正确的，避免了循环闭包的坑）。

修正后的JavaScript代码 #

// 用querySelectorAll更直观，也能避免getElementsByTagName的动态集合问题
const buttons = document.querySelectorAll('button'); 
for (let i = 0; i < buttons.length; i++){ 
    const current_button = buttons[i]; 
    current_button.addEventListener('mouseenter', function () { 
        console.log(current_button);
        anime({ 
            targets: current_button, // 这里改成复数targets
            scale: 2, 
            translateX: 500, 
            duration: 5000 
        });
        console.log("temp");
    });
}

额外检查项 #

如果修正后动画还是没运行，请确认这一点：

• 你已经在HTML中正确引入了anime.js库，要确保引入代码在你的自定义脚本之前，比如：

  <!-- 在你的自定义脚本前引入anime.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
  <!-- 你的自定义脚本 -->
  <script>
      // 你的代码...
  </script>
  

这样修改后，当鼠标悬停在按钮上时，应该就能看到预期的缩放和平移动画了。

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