元素
元素
工具
博客
问答

Animate.css动画只播放一次后失效怎么办？

轩辕树源 阅读 55
交互

我在项目里引入了 Animate.css，给一个按钮加了 animate__animated animate__bounce 类，第一次点击能正常弹跳，但之后再点就没反应了。是不是要手动清除类名？试过用 JavaScript 在动画结束后移除类，但感觉写法很麻烦，有没有更简单的办法？

这是我的代码：

<button id="btn" class="animate__animated animate__bounce">点我</button>
<script>
  document.getElementById('btn').addEventListener('click', function() {
    this.classList.add('animate__bounce');
  });
</script>
JS动画动画效果
我来解答 赞 6 收藏
二维码
手机扫码查看
反馈
1 条解答
打工人乙豪
打工人乙豪 Lv1
踩过这个坑的人不少，血泪教训就是得手动清理类名。你加了 animate__bounce 类后，动画执行完毕并不会自动移除，所以第二次点击时，这个类已经存在，浏览器就不会再触发相同的动画效果了。

解决办法就是在动画结束后移除 animate__bounce 类。你可以通过监听动画结束事件来实现，这样就不必手动在点击事件里处理了。以下是修改后的代码：

document.getElementById('btn').addEventListener('click', function() {

  var btn = this;

  btn.classList.add('animate__bounce');

  

  // 监听动画结束事件

  btn.addEventListener('animationend', function() {

    btn.classList.remove('animate__bounce');

  }, { once: true }); // 使用 once 选项确保事件只监听一次

});


这样每次点击按钮时都会重新添加 animate__bounce 类，并且在动画结束后自动移除，保证每次点击都能看到动画效果。希望这能帮到你，避免重复踩坑。
点赞
2026-03-21 12:24
相关推荐
元素
元素
工具
博客
问答
登录/注册