通过原生js检测CSS3的动画结束

最新推荐文章于 2022-06-26 13:35:49 发布

Embrace924

最新推荐文章于 2022-06-26 13:35:49 发布

阅读量350

点赞数

分类专栏： javascript 文章标签： javascript css css3

本文链接：https://blog.csdn.net/Embrace924/article/details/104939794

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>通过原生js检测CSS3的动画结束</title>

  <style>

  *{padding: 0;margin: 0;}

  .test{

    width: 200px;

    height: 200px;

    border: 1px soli black;

    background: red;

    transition-property:width;

    transition-duration: 3s;

  }

  /* 动画 */

  .test.move{

    width:600px;

  }

  button{

    width: 80px;

    height: 25px;

    font-size: 16px;

    text-align: center;

    line-height: 25px;

  }

  </style>

</head>

<body>

  <div class="test" id="main">

  </div>

  <button id="play">开始运动</button>

</body>

<script>

  // 示例动画主要是改变div的宽度

  // 主要是通过检测transition的值是否为transitionend

  function init() {

    var main = document.getElementById('main');

    var play = document.getElementById('play');

    var test = document.getElementsByClassName('test')[0];

    // 兼容性写法

    transitions = {

      // 兼容IE

      'transition': 'transitionend',

      // 兼容Opera

      'OTransition': 'oTransitionEnd',

      // 兼容Firefox

      'MozTransition': 'transitionend',

      // 兼容Google

      'WebkitTransition': 'webkitTransitionEnd'

    };

    function getTransitions() {

      var t;

      for (t in transitions) {

        // t即transition，OTransition，MozTransition，WebkitTransition

        if (main.style[t] !== undefined) {

          return transitions[t];

        }

      }

    }

    // 按钮添加click事件

    play.onclick = function () {

      main.classList.add('move');

    };

    // 接收返回的当前浏览器的transition的值

    var setTransitions = getTransitions();

    // 添加监听事件

    setTransitions && main.addEventListener(setTransitions,function (params) {

      alert('动画结束');

      // 删除类名move

      main.classList.remove('move');

    },false)

  }

  init();

</script>

</html>

Embrace924

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
通过原生js检测CSS3的动画结束

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA...
复制链接

扫一扫