animate.css 动画插件的使用

官网：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>
animate.css 动画插件的使用

猜你喜欢
