javascript判断css3动画结束 css3动画结束的回调函数
更新时间：2015年03月10日 08:51:10 投稿：hebedich
本文主要给大家介绍的是如何使用javascript判断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动画结束的方法，希望大家能够喜欢
相关文章
将数组转换成字符串的方法有很多，想必大家也不会陌生，下面为大家讲解下js冒泡法的使用，感兴趣的朋友可以参考下2013-08-08
换图片效果想必大家都有见到过吧，但是定时换图片，貌似就很少见了，下面本文通过一个示例为大家详细介绍下2014-06-06
下面小编就为大家带来一篇JS实现图片的不间断连续滚动的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要为大家详细介绍了JavaScript表单验证开发的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了JavaScript实现非常简单实用的下拉菜单效果,通过定义显示及隐藏菜单项及鼠标事件调用该函数实现下拉菜单功能,需要的朋友可以参考下2015-08-08
本文主要介绍了JavaScript中的call和apply的用途以及区别。具有很好的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍Javascript如何判断数据类型和数组类型,通俗易懂,需要的朋友可以参考下。2016-06-06
最近使用echarts做的一个H5的成绩数据报告,里面使用了雷达图已经折线图和柱状图,下面这篇文章主要给大家介绍了关于如何利用echarts画雷达图和折柱混合的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了微信小程序实现底部弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
javascript之with的使用(阿里云、淘宝使用代码分析)
这篇文章主要介绍了javascript之with的使用(阿里云、淘宝使用代码分析)，主要是发现了阿里云使用了这段比较有B格的代码，所以说下这个怎么样2016-10-10
最新评论