Load animate.css animations several times

Question

Load animate.css animations several times

Navigation

#1 by (2 votes)

3

I have this button that, when it loads, I set it to "animated flash" as a class to make the animation "flash" of animate.css. The problem I have is to put the class back to it by clicking the button, which does not catch the animation. Any way to solve this?

var elemento = document.getElementsByTagName("button")
elemento[0].setAttribute("class","animated flash")

function handleOnClick(e) {
    console.log("button clicked");
    const button = e.target;
    button.setAttribute("class", "animated flash");
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<button onclick="handleOnClick(event)"> myAnimatedButton </button>

html css

asked by Theia 10.07.2017 в 23:35

source

1 answer

How to decrypt javascript string hidden content? Protect config.ini file gives usare error for mysqli connection

score 2 · Accepted Answer

You should delete the class and add it again.

The code would be something like this:

var elemento = document.getElementsByTagName("button")
elemento[0].setAttribute("class","animated flash")

function handleOnClick(e) {
    console.log("button clicked");
    const button = e.target;
    button.classList.remove("flash");
    void button.offsetWidth;
    button.classList.add("flash");
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<button onclick="handleOnClick(event)"> myAnimatedButton </button>