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

最新推荐文章于 2021-07-07 15:00:04 发布

weixin_33860722

最新推荐文章于 2021-07-07 15:00:04 发布

阅读量422

点赞数

原文链接：http://www.cnblogs.com/ajanuw/p/8245107.html

版权

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>

转载于:https://www.cnblogs.com/ajanuw/p/8245107.html

weixin_33860722

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js监听指定元素的css动画属性

MDN监听css动画，开始，迭代次数，结束，中断回调函数返回 animationEvent属性<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style media="screen"> .a {...
复制链接

扫一扫