javascript - Why doesn't this basic anime.js work? -
i starting learn anime.js. see how worked, copied basic sample code documentation website. weirdly, square not animating right 250px should be...
html:
<!doctype html> <html lang="en-us"> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="anime.min.js"></script> <script src="script.js"></script> </head> <body> <div id="cssselector"> <div class="line"> <div class="square el"></div> </div> </div> </body> </html>
css:
body{ background-color: #232323; } .square{ width: 100px; height: 100px; background-color: red; }
and javascript
var cssselector = anime({ targets: '#cssselector .el', translatex: 250 });
i see square there no animation. program does read anime.min.js because there no error message in console.
what believe trying run code before page loaded.
add this:
function main(){ anime({ targets: '#cssselector .el', translatex: 250 }); } document.addeventlistener("domcontentloaded", main);
then should work: https://jsfiddle.net/derekl/980j4591/
Comments
Post a Comment