我有一個回圈的css關鍵幀影片。
animation-iteration-count: infinite
現在，當我單擊一個按鈕時，我希望影片完成當前回圈然后停止。
這個問題似乎是相關的，但是animationiteration webkitAnimationIteration在關鍵幀影片結束時似乎沒有呼叫回呼，而是更頻繁地呼叫。
編輯：這幾乎是正確的解決方案，只是它不能處理多個影片。有關更多資訊，請參閱下面的我的答案。
這個例子展示了我的影片，在懸停時我想嘗試完成當前回圈然后停止。這包括@Alex Gru 提出的答案，如果一個人等待影片回圈多次然后懸停您可以看到影片跳轉，則它不起作用。如果它沒有回圈完整的迭代并且我設定animation-iteration-count: 1它按預期作業。
uj5u.com熱心網友回復：
這是您的用例的最小解決方案：
.stop首先，當您想要完成影片時添加另一個類。
$(".target").addClass("stop");
定義以下 css 樣式，它完成當前回圈并在之后停止影片。
.target.stop {
-webkit-animation-iteration-count: 1;
animation: none;
}
另請參閱：完成無限迭代回圈并使用 CSS 停止影片
uj5u.com熱心網友回復：
所以我發現了為什么它不起作用。畢竟我是如何讓它作業的，還有一些額外的資訊，我將在這里解釋。
這是我的錯，因為附加了另一個影片子元素：
<div id="a1"> <-- Main animation that should finish the loop
<div id="a2"></div> <-- sub animation that should not be finished
</div>
這就是為什么影片回呼比預期更頻繁地觸發的原因。但是：我發現我可以按影片名稱過濾！
$("#a1").on('animationiteration webkitAnimationIteration', function(e) {
/* this triggers not only when animation of #a1 iterated but also if animation of #a2 iterated */
let animation_name = e.originalEvent.animationName;
if(animation_name == "animation1name"){
//This will only trigger if the correct animation iterated
}
});
我希望這個解決方案可以幫助那些試圖處理應用于一個元素（或子元素）的多個回圈影片的人
感謝所有幫助過的人！（我調整了問題標題以突出問題的實際情況）
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420530.html
標籤：
上一篇：Pygame-等待影片完成