Javascript在CSS3动画结束判断的CSS3动画结束回调函数
传统的js可以根据回调函数判断动画是否完成。即使动画效果是由CSS技术生成的,Javascript仍然可以捕获动画或转换的结束事件。
transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器,你仍然需要使用WebKit的前缀,所以我们要根据不同的浏览器事件检测。
复制代码代码如下所示:
VAR转变= { {
过渡:'transitionend,
otransition:'otransitionend,
moztransition:'transitionend,
webkittransition:'webkittransitionend
}
附上下面的源代码:
复制代码代码如下所示:
Suface JS决定CSS动画结束
一旦动画或转换结束,回调函数将被触发,不再需要大型类库支持。
{。样品
宽度:200px;
身高:200px;
border: 1px solid绿色;
背景:浅绿色;
不透明性:1;
边距:20px;
过渡属性:不透明;
转换持续时间:*;
转换持续时间:3S;
}
{ Sample.hide。
不透明性:0;
}
CSS3动画过于隐藏(过渡时间:3S;)
慢下来,检查事件的结束
(函数(){())
var = document.getelementsbyclassname('sample){ 0 };
功能whichtransitionevent(){
var t;
var el = document.createelement('fakeelement);
var转换= {
过渡:'transitionend,
otransition:'otransitionend,
moztransition:'transitionend,
webkittransition:'webkittransitionend
}
对于(t在转换){
如果(EL样式{ })!=未定义的){
返回转换{ };
}
}
}
无功transitionevent = whichtransitionevent();
transitionevent e.addeventlistener(transitionevent,函数()){
警报('css3运动结束!我是一个回调函数,我不使用第三方类库!;
});
startfade =函数(){
e.classname += '隐藏';
}
});
以上是由Javascript判断CSS3动画结束的方法。我希望每个人都能喜欢它。