javascript判断css3动画结束 css3动画结束的回调函数


Posted in Javascript onMarch 10, 2015

css3 的时代,css3--动画 一切皆有可能;

javascript判断css3动画结束 css3动画结束的回调函数

传统的js 可以通过回调函数判断动画是否结束;即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件;

transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件

var transitions = {

       'transition':'transitionend',

       'OTransition':'oTransitionEnd',

       'MozTransition':'transitionend',

       'WebkitTransition':'webkitTransitionEnd'

     }

下面附上源代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>suface   js判断css动画是否结束</title>

</head>

<body>

<p>一旦动画或变换结束,回调函数就会触发。不再需要大型类库支持。<br> </p>

<style type="text/css">

.sample {

width: 200px;

height: 200px;

border: 1px solid green;

background: lightgreen;

opacity: 1;

margin-bottom: 20px;

transition-property: opacity;

/*transition-duration: .5s;*/

transition-duration:3s;

}

  .sample.hide {

opacity: 0;

}

</style>

<div class="sample">css3动画过度慢慢隐藏(transition-duration:3s;)</div>

<p><button onclick="this.style.display='none';startFade();">慢慢消退,检测结束事件</button></p>

<script>             

                   (function() {

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

   function whichTransitionEvent(){

       var t;

       var el = document.createElement('fakeelement');

       var transitions = {

         'transition':'transitionend',

         'OTransition':'oTransitionEnd',

         'MozTransition':'transitionend',

         'WebkitTransition':'webkitTransitionEnd'

       }

       for(t in transitions){

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

               return transitions[t];

           }

       }

   }

   var transitionEvent = whichTransitionEvent();

   transitionEvent && e.addEventListener(transitionEvent, function() {

    alert('css3运动结束!我是回调函数,没有使用第三方类库!');

   });

   startFade = function() {

    e.className+= ' hide';

   }

  })();<br></script>

</body>

</html>

以上就是本文所述的关于javascript判断CSS3动画结束的方法,希望大家能够喜欢

Javascript 相关文章推荐
jQuery setTimeout()函数使用方法
Apr 07 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
js浏览器html5表单验证
Oct 17 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 #Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 #Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 #Javascript
JQuery操作元素的css样式
Mar 09 #Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 #Javascript
jquery获取及设置outerhtml的方法
Mar 09 #Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 #Javascript
You might like
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
php curl常用的5个经典例子
2017/01/20 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
bootstrap table小案例
2016/10/21 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python与php实现分割文件代码
2017/03/06 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Python面向对象进阶学习
2019/05/21 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
求职信需要的五点内容
2014/02/01 职场文书
幼儿园老师寄语
2014/04/03 职场文书
科技之星事迹材料
2014/06/02 职场文书
欢迎领导检查标语
2014/06/27 职场文书
企业年会祝酒词
2015/08/11 职场文书
生产实习心得体会范文
2016/01/22 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers