2

webkit-animation complete にコールバックはありますか? 例を見る

@-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でリッスンされているため、小さな事故が発生しましたが、一度に1つしか起動されないため、同じ関数が2つの別々のアニメーション終了イベントで2回起動されます。

代わりに、次のような関数を使用することもできます。

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 に答える