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 解析后的xml对象的读取方法细解
Jul 25 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
在vue中使用防抖函数组件操作
Jul 26 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
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
分享php分页的功能模块
2015/06/16 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
Python基础入门之seed()方法的使用
2015/05/15 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python实现堆排序的实例讲解
2020/02/21 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python中and和or如何使用
2020/05/28 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
大专自我鉴定范文
2013/10/23 职场文书
自荐信格式技巧有哪些呢
2013/11/19 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
关于运动会的口号
2014/06/07 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
财务部岗位职责范本
2015/04/14 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
Python之基础函数案例详解
2021/08/30 Python