animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
https://animate.style/
Other
80.84k stars 16.24k forks source link

animateCSS() function does not work. #929

Closed sykeben closed 5 years ago

sykeben commented 5 years ago

So, here's my JS:

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

document.onload = function() {
    animateCSS('#head-3-bouncer', 'bounce')
}

And it's supposed to make the text "moves" (id head-3-bouncer) in the following HTML bounce upon page load:

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    </head>

    <body>

        <div class="container-fluid">

            <div class="row p-3">

                <div id="head-1" class="col bg-light rounded border shadow-sm m-3 p-4 text-center">
                    <h1 class="font-weight-light">Look Ma!</h1>
                </div>

                <div id="head-2" class="col bg-light rounded border shadow-sm m-3 p-4 text-center">
                    <h1 class="font-weight-light">My site...</h1>
                </div>

                <div id="head-3" class="col bg-light rounded border shadow-sm m-3 p-4 text-center">
                    <h1 class="font-weight-light">It <span id="head-3-bouncer">moves</span>!</h1>
                </div>

            </div>

        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

        <script src="hello.js"></script>

    </body>

</html>

Is there anything I'm doing wrong? The browser I am using is Firefox Developer 67.0b13 (64-bit) on Windows 10 Version 1809 (OS Build 17763.437). I'm thinking that the onload may be too early for the browser to be ready, but you may prove me wrong.

sykeben commented 5 years ago

I just found that the <span> that the text is in cannot change position, my bad.