官网: https://daneden.github.io/animate.CSS/
- <!DOCTYPE html>
- <HTML lang="en">
- <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 id="boxOne" class="animated bounce">
- 页面加载就触发动画
- </div>
- <hr/>
- <div id="box">
- 单击事件动画
- </div>
- <div class="container">
- <button id="btn">
- 点击触发动画
- </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>
来源: http://www.bubuko.com/infodetail-3456262.html