原生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 选中表格一列并对表格排序实现原理
Dec 15 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
JavaScript编码小技巧分享
Sep 17 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
一步一步学习PHP(8) php 数组
2010/03/05 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python获取外网ip地址的方法总结
2015/07/02 Python
使用Python对SQLite数据库操作
2017/04/06 Python
python GUI实例学习
2017/11/21 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
通信工程毕业生求职信
2013/11/16 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
一份文言文检讨书
2014/09/13 职场文书
争先创优个人总结
2015/03/04 职场文书
个人简历求职信范文
2015/03/20 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
聘任合同书
2015/09/21 职场文书
七年级作文之游记
2019/12/11 职场文书