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 可拖拽的窗体控件实现代码
Mar 21 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
javascript包装对象实例分析
Mar 27 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
vue实现图书管理系统
Dec 29 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
php中hashtable实现示例分享
2014/02/13 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
jcrop基本参数一览
2013/07/16 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
python怎么调用自己的函数
2020/07/01 Python
如何利用python进行时间序列分析
2020/08/04 Python
详解css3 object-fit属性
2018/07/27 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
年终总结会议主持词
2014/03/17 职场文书
教室布置标语
2014/06/26 职场文书
环保公益策划方案
2014/08/15 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
仓管员岗位职责
2015/02/03 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Python并发编程实例教程之线程的玩法
2021/06/20 Python
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs