2

webkit-animation 是否有任何回调完成？看例子

@-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");​

但是这个回调不起作用

4

1 回答 1

2

这可以解决问题：

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 "";
    }
}

并根据需要添加更多供应商特定的前缀。

为了识别浏览器，我真的可以推荐这个：

如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器？

于 2013-02-07T08:42:12.890 回答