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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
图解js图片轮播效果
Dec 20 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
PHP7新特性
2021/03/09 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
python模拟斗地主发牌
2020/04/22 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
工商干部先进事迹
2014/05/14 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
闪闪红星观后感
2015/06/08 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python