原生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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
微信小程序实现图片上传
May 23 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
JavaScript编写开发动态时钟
Jul 29 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将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
AngularJS快速入门
2015/04/02 Javascript
js运动应用实例解析
2015/12/28 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
python设计模式大全
2016/06/27 Python
python实现日常记账本小程序
2018/03/10 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Python assert语句的简单使用示例
2019/07/28 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2014年业务工作总结
2014/11/17 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
先进个人自荐书
2015/03/06 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
创业计划书之养殖业
2019/10/11 职场文书