js监听指定元素的css动画属性

MDN

监听css动画，开始，迭代次数，结束，中断
回调函数返回 animationEvent属性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
    .a {
      width: 100px;
      height: 100px;
      background: red;
      animation: test 2.5s cubic-bezier(0.38, 0.88, 0.88, 1.37) 0s 2 alternate;
    }

    @keyframes test {
      0% {
        transform: rotate(0deg);
      }
      50%, 60%{
        transform: rotate(120deg);
      }
      100% {
        transform: rotate(30deg);
      }
    }
  </style>
</head>

<body>
  <div class="a"></div>
  <script>
    var target = document.querySelector('.a');
    target.addEventListener('animationcancel', AnimationEvent=>{
      // CSS Animation属性意外中断时派发出来
      console.log( `animation cancel`);
    });
    target.addEventListener('animationstart', AnimationEvent=>{
      // CSS Animation开始
      console.log( `animation start`);
      console.log( AnimationEvent);
    });
    target.addEventListener("animationiteration", AnimationEvent=>{
        // 监听 iteration-cont
        console.log('animation iteration')
    });
    target.addEventListener('animationend', AnimationEvent=>{
      // CSS Animation结束
      // css 意外的中断不会触发 end
      console.log( `animation end`);
    });
  </script>
</body>

</html>
posted @ 2018-01-08 21:53  Ajanuw  阅读(1273)  评论(0)  编辑  收藏  举报