Animate.css是一个css动画库，可以做出一些非常好看的动画；
Animate.css非常容易上手，但是动画是一开始就加载出来，不能控制；
如何通过js事件，比如点击事件控制呢？
代码：
<html> <head> <meta charset="utf-8"> <title>Animate 实例title> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> head> <style type="text/css"> /* CSS代码 */ #box { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } style> <script type="text/javascript"> /* JS代码 *//* 定义animateCss函数（传过来的元素，动画名，回调函数） */ function animateCss(element, animationName, callback) { /* 获取传过来的 */ const node = document.querySelector(element); /* 给元素加上基础类animated，还有动画类 */ node.classList.add('animated', animationName); function handleAnimationEnd() { /* 移除基础类和动画类 */ node.classList.remove('animated', animationName); /* 解除当前元素的事件监听 */ node.removeEventListener('animationend', handleAnimationEnd); /* 如果有回调函数，就执行回调函数 */ if (typeof callback === 'function') callback(); } /* 通过事件监听，当动画结束后，执行handleAnimationEnd函数 */ node.addEventListener('animationend', handleAnimationEnd); } script> head> <body> <div id="box" >div> <center> <button id="btn" onclick="animateCss('#box','bounce')">btnbutton> center> body> html>
注意：这是3.7.0的版本，目前的Animate.css已经更新到了4.1，如果引入最新的，需要修改js的函数
Original: https://www.cnblogs.com/cjin-01/p/16686119.html
Author: 2337
Title: 使用Animate.css
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/711047/
转载文章受原作者版权保护。转载请注明原作者出处！