javascript - 如何使用 JavaScript 更新 Animate.css 类

Question

我正在创建一个网站，我想在某个事件(如按钮点击)上进行动画更改。我试过使用下面的代码，但它不起作用。我应该如何解决这个问题？我有什么问题吗，例如，我的 setAttribute() 值有误吗？

function change() {
  document.getElementById("demo").setAttribute("class", "animated fadeOutDown");
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<p id="demo" class="animated fadeInRight delay-2s">Test</p>

<button onclick="change()">Change</button>

感谢所有帮助。

Answer 1

单击按钮时动画效果很好。您尝试在哪个浏览器上运行它？ 一些浏览器在通过 setAttribute 方法设置类时存在问题，推荐的方法是使用 className 变量设置类，如下所示

document.getElementById("demo").className = "animated fadeOutDown";