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 相关文章推荐
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
jQuery jcrop插件截图使用方法
Nov 20 Javascript
js使用心得分享
Jan 13 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
宿舍违规用电检讨书
2014/02/16 职场文书
电子银行营销方案
2014/02/22 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
个人委托书范本
2014/09/13 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
幼儿园辞职书
2015/02/26 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL