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 相关文章推荐
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 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自定义加密与解密程序实例
2014/12/31 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
超市端午节活动方案
2014/01/23 职场文书
写求职信有什么意义
2014/02/17 职场文书
安全责任书怎么写
2014/07/28 职场文书
开票员岗位职责
2015/02/12 职场文书
年度考核表个人总结
2015/03/06 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
Golang 链表的学习和使用
2022/04/19 Golang