原生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 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
Jquery之美中不足小结
Feb 16 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
js实现删除json中指定的元素
Sep 22 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世纪万年历
2006/12/06 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
PHP代码优化技巧小结
2015/09/29 PHP
php实现三级级联下拉框
2016/04/17 PHP
Yii全局函数用法示例
2017/01/22 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
深入理解python多进程编程
2016/06/12 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
python输出带颜色字体实例方法
2019/09/01 Python
python批量生成条形码的示例
2020/10/10 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
外贸业务员工作职责
2014/01/06 职场文书
岗位明星事迹材料
2014/05/18 职场文书
2014年党总支工作总结
2014/12/18 职场文书
公务员政审个人总结
2015/02/12 职场文书
感恩老师主题班会
2015/08/12 职场文书