如何用 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";

如何用 JavaScript 更新 Animate.css 类

How to update Animate.css classes with JavaScript

html

javascript

css

animate.css