CSS動畫+ Javascript回調

Question

我有一個CSS過渡，該過渡使用-webkit-transform: translateX從右向左移動div，這是一個基本的滑動動作（我保證我只有webkit用戶）。

我的問題是，動畫制作完成后我需要運行一個動作，直到現在，我一直在javascript中使用setTimeout調用在動畫制作完成后運行1毫秒。

它可以在99％的時間內完美運行，但是在極少數情況下，它運行不平穩並會引起問題，我知道這是由於超時未在正確的時間准確運行所致。

從我的在線研究中，我聽說過為webkit轉換結束添加一個事件偵聽器，但無法使其正常工作，它在其他人的在線示例中也可以正常工作：

jsfiddle.net/jfriend00/5FnwY/

我的動畫是由javascript觸發的，單擊按鈕后， .move_in類將添加到主div元素中，然后開始動畫。 CSS如下：

.renderZone {
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-duration:805ms;
    -moz-animation-timing-function:ease-in-out;
    -moz-animation-duration:805ms;
}

.move_in {
    -webkit-transform: translateX(0%) !important;
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-0%) !important;
    -moz-animation-name: slideouttoleft;
}

.move_out {
    -webkit-transform: translateX(-100%) !important;
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-100%) !important;
    -moz-animation-name: slideouttoleft;
}

@-webkit-keyframes slideouttoleft {
    from {
        -webkit-transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-100%);
    }
}

是否有人對解決此問題的最佳方法有所了解，甚至對我正在做的事情有更好的了解？ 我需要保持CSS動畫的運行狀態，因為這在我已經嘗試了很多的iOS上提供了最佳性能。

希望有人可以幫忙！

謝謝！！！

Answer 1

CSS3具有一個稱為“ webkitAnimationEnd”的屬性，可以在JavaScript中用作事件列表器。

示例代碼：

function cssAnimationEnd() {
//looks for the ID box from the css and fires the event listen when the animation is complete.
box.addEventListener( 'webkitAnimationEnd', function( event ){
alert( "Finished animation!" );
}, false );
}