本文介绍如何使用JavaScript检测CSS3动画是否执行完毕。通过动态检测浏览器支持的前缀（如Webkit、Moz等），绑定对应的transitionend事件，从而准确捕获动画结束时刻。文中提供了完整的封装代码，处理了不同浏览器厂商前缀的差异，适用于需要精确控制动画流程的前端开发场景。
JavaScript检测CSS动画完成状态的方法
直接展示核心实现代码：
WN:(function(){
var el = $('<fakeelement>'),
transition="transition",
transitionEnd,
animEvent={'start':null,'iteration':null,'end':null},
vendorPrefix;
transition = transition.charAt(0).toUpperCase() + transition.substr(1);
vendorPrefix=(function(){//现在的opera也是webkit
var i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"];
while (i < vendor.length) {
if (typeof el.css(vendor[i] + transition) === "string"){
return vendor[i];
}
i++;
}
return false;
})();
transitionEnd=(function(){
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for(var name in transEndEventNames){
if(typeof el.css(name) === "string"){
return transEndEventNames[name];
}
}
})();
animEvent.end=(function(){
var animEndEventNames = {
WebkitAnimation : 'webkitAnimationEnd',
animation : 'animationend'
}
for(var name in animEndEventNames){
if(typeof el.css(name) === "string"){
return animEndEventNames[name];
}
}
})();
animEvent.iteration=(function(){
var animIterationEventNames = {
WebkitAnimation : 'webkitAnimationIteration',
animation : 'animationiteration'
}
for(var name in animIterationEventNames){
if(typeof el.css(name) === "string"){
return animIterationEventNames[name];
}
}
})();
animEvent.start=(function(){
var animStartEventNames = {
WebkitAnimation : 'webkitAnimationStart',
animation : 'animationstart'
}
for(var name in animStartEventNames){
if(typeof el.css(name) === "string"){
return animStartEventNames[name];
}
}
})();
return {
called:false,
addTranEvent:function(elem,fn,duration){
var self = this;
var fncallback = function(){
if(!self.called){
fn();
self.called = true;
}
};
function hand(){
elem.on(transitionEnd,function(){
//elem.unbind(transitionEnd,arguments.callee);
fncallback();
});
}
setTimeout(hand,duration);
},
addAnimEvent:function(elem,name,fn){
elem.on(animEvent[name],fn);
},
removeAnimEvent:function(elem,name,fn){
elem.unbind(animEvent[name],fn);
},
setStyleAttribute:function(elem,val){
if(Object.prototype.toString.call(val) === "[object Object]"){
for(var name in val){
if(/^transition|animation|transform/.test(name)){
var styleName=name.charAt(0).toUpperCase() + name.substr(1);
elem.css(vendorPrefix+styleName,val[name]);
}else{
elem.css(name,val[name]);
}
}
}
}
};
})(),上述内容涵盖了检测CSS动画完成状态的主要逻辑，希望能为读者的技术学习提供实用参考，同时也欢迎持续关注本站获取更多前端开发技巧。