Closed sykeben closed 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:
head-3-bouncer
<!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.
Firefox Developer 67.0b13 (64-bit)
Windows 10 Version 1809 (OS Build 17763.437)
onload
I just found that the <span> that the text is in cannot change position, my bad.
<span>
So, here's my JS:
And it's supposed to make the text "moves" (id
head-3-bouncer
) in the following HTML bounce upon page load:Is there anything I'm doing wrong? The browser I am using is
Firefox Developer 67.0b13 (64-bit)
onWindows 10 Version 1809 (OS Build 17763.437)
. I'm thinking that theonload
may be too early for the browser to be ready, but you may prove me wrong.