檢測剛剛在JavaScript中結束了哪個CSS動畫？

如何檢測剛剛在JavaScript中完成了哪些CSS動畫？檢測剛剛在JavaScript中結束了哪個CSS動畫？

最終的需求是重新觸發一個CSS動畫。由於我們的HTML層次結構，我們不喜歡檢查元素的類，而是隻在特定動畫結束時才採取行動。如果您有一種方法可以在不刪除/添加課程的情況下重新觸發動畫，請告訴我們。

否則......我們的代碼：

page.find('.button.letter').on('webkitAnimationEnd', function() { 
     $(this).removeClass('tap_animation'); 

     console.log('Hi: ' + this.style.webkitAnimationName); 

     if (!write_mode()) { 
      do_write(this); 
     } 
    });

this.style.webkitAnimationName總是返回空字符串。

我們做錯了什麼？

我們需要WebKit瀏覽器的代碼，特別是Mobile Safari。

謝謝！

來源

2012-09-19 Crashalot

如果要循環的動畫，這已經支持CSS3。如果這不是你想要的，你能詳細說明一下嗎？ – Shmiddty

不循環動畫，只需在不刪除/添加類的情況下重新觸發動畫即可。我們通過添加一個類然後在一些未確定的時間後觸發一個動畫，我們需要重新觸發它。如果刪除/添加一個類是唯一的方法，那麼我們需要解決這裏列出的問題。 – Crashalot

從jQuery的你可以訪問originalEvent對象，並從那裏，animationName屬性：

$('body').on('webkitAnimationEnd', function(e){ 
    var animName = e.originalEvent.animationName; 
    console.log(animName); 
});

(Webkit-only) JS Fiddle demo。

從那裏，只需使用if來檢查動畫名稱是/是（過去式，我想，假設它結束了）。

上述更新，以得到可能更好地說明：

$('div').on('webkitAnimationEnd', function(e){ 
    var animName = e.originalEvent.animationName; 
    if (animName == 'bgAnim') { 
     alert('the ' + animName + ' animation has finished'); 
    } 
});

(Webkit-only) JS Fiddle demo。

該演示使用以下HTML：

<div><span>text</span></div>

和CSS：

@-webkit-keyframes bgAnim { 
    0%, 100% { 
     color: #000; 
     background-color: #f00; 
    } 
    50% { 
     color: #fff; 
     background-color: #0f0; 
    } 
} 

@-webkit-keyframes fontSize { 
    0%, 100% { 
     font-size: 100%; 
    } 
    50% { 
     font-size: 300%; 
    } 
} 

div { 
    font-weight: bold; 
    -webkit-animation: bgAnim; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 2; 
} 

span { 
    font-size: 100%; 
    font-weight: bold; 
    -webkit-animation: fontSize; 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: 1; 
}

來源

2012-09-19 16:26:02

你太棒了，但你和你的51.4k點已經知道了。 :)你不知道另一種方式來重新觸發CSS動畫（在一些用戶操作之後），而不需要添加/刪除類嗎？ – Crashalot

爲什麼感謝你！至於重新開始動畫，否;我認爲（儘管我還沒有真正探討過這個問題），不幸的是，添加/刪除/切換類是唯一的出路。 –

謝謝，大衛。我們有一個相關的問題，我們希望你也知道答案：http://stackoverflow.com/questions/12499335/bind-to-custom-css-animation-end-event-with-jquery-or -javascript。如果你有機會，我們會愛你的想法！ – Crashalot

webkitAnimationEnd的事件偵聽器應該可以工作。沿着線的東西：

$object.addEventListener('webkitAnimationEnd', function(){ 
     console.log('End Detected'); 
    }, false);

來源

2012-09-19 16:16:03 AJak

謝謝，但你如何檢測*哪個*動畫結束。針對同一個對象運行多個動畫。 – Crashalot

檢測剛剛在JavaScript中結束了哪個CSS動畫？

回答

相關問題