原生js判断css动画结束 css 动画结束的回调函数
2015-03-09 17:33
591 查看
原文:原生js判断css动画结束css动画结束的回调函数
css3的时代，css3--动画一切皆有可能；
传统的js可以通过回调函数判断动画是否结束；即使是采用CSS技术生成动画效果，JavaScript仍然能捕获动画或变换的结束事件；
vartransitions={
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
下面附上源代码：
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>sufacejs判断css动画是否结束</title>
</head>
<body>
<p>一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持。<br>http://www.webhek.com/css-animation-callback/来源于web骇客</p>
<styletype="text/css">
.sample{
width:200px;
height:200px;
border:1pxsolidgreen;
background:lightgreen;
opacity:1;
margin-bottom:20px;
transition-property:opacity;
/*transition-duration:.5s;*/
transition-duration:3s;
}
.sample.hide{
opacity:0;
}
</style>
<divclass="sample">css3动画过度慢慢隐藏（transition-duration:3s;）</div>
<p><buttononclick="this.style.display='none';startFade();">慢慢消退，检测结束事件</button></p>
<script>
(function(){
vare=document.getElementsByClassName('sample')[0];
functionwhichTransitionEvent(){
vart;
varel=document.createElement('fakeelement');
vartransitions={
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(tintransitions){
if(el.style[t]!==undefined){
returntransitions[t];
}
}
}
vartransitionEvent=whichTransitionEvent();
transitionEvent&&e.addEventListener(transitionEvent,function(){
alert('css3运动结束！我是回调函数，没有使用第三方类库！');
});
startFade=function(){
e.className+='hide';
}
})();
</script>
</body>
</html>
css3的时代，css3--动画一切皆有可能；
传统的js可以通过回调函数判断动画是否结束；即使是采用CSS技术生成动画效果，JavaScript仍然能捕获动画或变换的结束事件；
transitionend事件和
animationend事件标准的浏览器事件，但在WebKit浏览器里你仍然需要使用
webkit前缀，所以，我们不得不根据各种浏览器分别检测事件
下面附上源代码：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd
- javascript判断css3动画结束 css3动画结束的回调函数
- 原生JS实现CSS动画效果
- 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子
- js判断css动画是否完成 animation,transition
- 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子
- js控制过场动画，setTimeout和clearTimeout的用法以及document.onreadystatechange判断页面是否加载结束
- 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束
- javascript判断css3动画结束 css3动画结束的回调函数
- fullPage.js — 回调函数演示和animate.css使用-------全屏滚动加载动画
- javascript判断css3动画结束 css3动画结束的回调函数
- 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子
- 如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子
- 如何用JS判断一个网页中的图片是否下载结束
- JS判断页面加载状态以及添加遮罩和缓冲动画
- JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
- js、css、html判断浏览器的各种版本
- 不要再吹水地球人听不懂的技术，咱来点干货!--中文前端UI框架Kit（四）给你真正的原生的drag以及drop事件，而不是像市面上主流的Js框架jQuery，Ext等，利用mousemove事件，判断位置来模拟
- 利用js，css来判断浏览器执行不同css