animate.css 动画插件的使用
官网:https://daneden.github.io/animate.css/
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> <style> #boxOne { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } #box { width: 100px; height: 100px; background: paleturquoise; margin: 100px auto; } .container{ text-align: center; } </style> </head> <body> <div class="animated bounce">页面加载就触发动画</div> <hr/> <div >单击事件动画</div> <div class="container"><button >点击触发动画</button></div> <script> 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); } /*点击按钮后触发animateCss函数*/ btn.onclick = function() { animateCss('#box', 'rubberBand') }; </script> </body> </html>
- 上一篇 »vue 集成 animate.css 动画库
- 下一篇 »CSS动画