webkit动画是否已完成回调?见example
@-webkit-keyframes "blink" {
0% { opacity: 1; }
100% { opacity: 0; }
}
.animate {
background: #000;
height: 100px;
width: 100px;
opacity: 0;
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease;
}
$("div").bind("webkitTransitionEnd", function() {
alert(1);
}).addClass("animate");
但这个回拨不起作用
最佳答案
这就可以做到:element.addEventListener('webkitAnimationEnd', function(event) { });
在firefox中,这个事件被称为“animationend”,但是一些webkit浏览器会同时监听这两个事件。相反,如果使用jquery,可以使用$element.on('webkitAnimationEnd animationend' , function(event){ });
更新:
我最近在使用.one('webkitAnimationEnd animationend')
时遇到了一个小问题,因为这两个事件都在chrome中被监听,但一次只触发一个,同一个函数将在两个独立的动画结束事件上触发两次。
相反,一个小技巧是使用类似的函数:
getTransitionEndEvent : function(){
switch(this._currentBrowser){
case enums.Browser.SAFARI:
case enums.Browser.CHROME:
return "webkitTransitionEnd";
case enums.Browser.FIREFOX:
return "transitionend";
default:
console.log("unknown browser agent for transition end event");
return "";
}
}
并根据需要添加更多特定于供应商的前缀。
为了识别浏览器,我建议您:
How to detect Safari, Chrome, IE, Firefox and Opera browser?