原生JS检测CSS3动画是否结束的方法详解


Posted in Javascript onJanuary 27, 2019

本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考,具体如下:

不知道大家在做网页的时候有没有碰到这种情况:当你使用CSS3的动画属性时,想要在动画结束后添加一系列操作,但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了。

针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义:

代码如下:

<!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>

效果如下:

原生JS检测CSS3动画是否结束的方法详解

可以看到当动画结束时才弹出弹框可以验证方法的可行性。

最后提一下,这个方法仍存在一些问题,比如你改变两个属性:宽度和高度,可能就会触发这个方法两次或者多次,所以使用的时候要注意一下。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
基于javascript编写简单日历
May 02 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
深入理解React高阶组件
Sep 28 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 #Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 #Javascript
vue-cli构建vue项目的步骤详解
Jan 27 #Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 #Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 #Javascript
实例讲解JS中pop使用方法
Jan 27 #Javascript
Vue.js实现的购物车功能详解
Jan 27 #Javascript
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
用户的详细注册和判断
2006/10/09 PHP
PHP4 与 MySQL 交互使用
2006/10/09 PHP
Yii配置文件用法详解
2014/12/04 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
一些mootools的学习资源
2010/02/07 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
国际贸易专业个人求职信格式
2014/02/02 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
光荣之路观后感
2015/06/12 职场文书
销售口号霸气押韵
2015/12/24 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
Java实现带图形界面的聊天程序
2022/06/10 Java/Android