Search code examples
javascripthtmlcssanimate.css

How to update Animate.css classes with JavaScript

I am creating a website, and I want to have an animation change on an event (like a button click). I have tried using the below code, but it's not working. How should I fix this? Do I have anything wrong, like, is my setAttribute() value wrong?

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>

All help appreciated.

Solution

  • The animation works fine on clicking the button. which browser did you try running it on? Some browsers have a problem with setting classes through the setAttribute method, the recommended approach would be to set the classes using the className variable, like below

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