使用JQuery事件檢測特定CSS關鍵幀動畫

Question

我有兩個CSS @keyframe動畫應用於同一元素。一個在:hover上觸發，另一個在鼠標上觸發，都使用CSS。

我很想知道是否有辦法檢測選定關鍵幀動畫的結尾，而不是將其附加到元素併發射兩次？

Answer 1

試試這個例子：

function whichAnimationEvent(){ 
    var t, 
    el = document.createElement("fakeelement"); 

var animations = { 
    "animation"  : "animationend", 
    "OAnimation"  : "oAnimationEnd", 
    "MozAnimation" : "animationend", 
    "WebkitAnimation": "webkitAnimationEnd" 
} 

for (t in animations){ 
    if (el.style[t] !== undefined){ 
    return animations[t]; 
    } 
} 
} 

var animationEvent = whichAnimationEvent(); 

$(".button").click(function(){ 
$(this).addClass("animate"); 
$(this).one(animationEvent, 
      function(event) { 
    // Do something when the animation ends 
}); 
}); 

Answer 2

如果有檢測到選定的關鍵幀動畫

如果你的目的是要檢測一個關鍵幀的結局結束的方式動畫本身，而不是檢測每個關鍵幀的結束，然後，是的，它可以使用animationend event完成。每次附加到元素的任何動畫完成時，都會觸發此事件，並且上下文信息有一個名爲animationName的參數，我們可以使用該參數查找哪個動畫已結束。

animationName參數很重要，因爲當多個動畫將應用於相同的元素（如您的情況）時，您需要知道哪個動畫實際已結束，因爲在每個動畫結束時會觸發此事件。

使用香草JS：

window.onload = function() { 
 
    var elm = document.querySelector('.animate'); 
 
    var op = document.querySelector('.output'); 
 

 
    elm.addEventListener('animationend', function(e) { /* this is fired at end of animation */ 
 
    op.textcontent = 'Animation ' + e.animationName + ' has ended'; 
 
    }); 
 
    elm.addEventListener('animationstart', function(e) { /* this is fired at start of animation */ 
 
    op.textcontent = 'Animation ' + e.animationName + ' has started'; 
 
    }); 
 
}

.animate { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 10px; 
 
    border: 1px solid red; 
 
    animation: shake-up-down 2s ease; 
 
} 
 
.animate:hover { 
 
    animation: shake-left-right 2s ease forwards; 
 
} 
 
@keyframes shake-up-down { 
 
    0% { 
 
    transform: translateY(0px); 
 
    } 
 
    25% { 
 
    transform: translateY(10px); 
 
    } 
 
    75% { 
 
    transform: translateY(-10px); 
 
    } 
 
    100% { 
 
    transform: translateY(0px); 
 
    } 
 
} 
 
@keyframes shake-left-right { 
 
    0% { 
 
    transform: translateX(0px); 
 
    } 
 
    25% { 
 
    transform: translateX(10px); 
 
    } 
 
    75% { 
 
    transform: translateX(-10px); 
 
    } 
 
    100% { 
 
    transform: translateX(0px); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div class='animate'></div> 
 

 
<div class='output'></div>

---

使用jQuery：

$(document).ready(function() { 
 
    var elm = $('.animate'); 
 
    var op = $('.output'); 
 

 
    elm.on('animationend', function(e) { /* fired at the end of animation */ 
 
    op.html('Animation ' + e.originalEvent.animationName + ' has ended'); 
 
    }); 
 
    elm.on('animationstart', function(e) { /* fired at the start of animation */ 
 
    op.html('Animation ' + e.originalEvent.animationName + ' has started'); 
 
    }); 
 
});

.animate { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 10px; 
 
    border: 1px solid red; 
 
    animation: shake-up-down 2s ease; 
 
} 
 
.animate:hover { 
 
    animation: shake-left-right 2s ease forwards; 
 
} 
 
@keyframes shake-up-down { 
 
    0% { 
 
    transform: translateY(0px); 
 
    } 
 
    25% { 
 
    transform: translateY(10px); 
 
    } 
 
    75% { 
 
    transform: translateY(-10px); 
 
    } 
 
    100% { 
 
    transform: translateY(0px); 
 
    } 
 
} 
 
@keyframes shake-left-right { 
 
    0% { 
 
    transform: translateX(0px); 
 
    } 
 
    25% { 
 
    transform: translateX(10px); 
 
    } 
 
    75% { 
 
    transform: translateX(-10px); 
 
    } 
 
    100% { 
 
    transform: translateX(0px); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div class='animate'></div> 
 

 
<div class='output'></div>

在上面的代碼片段中，您可以看到div的內容如何表示每個動畫完成後結束的動畫的名稱。

注意： CSS動畫在某些瀏覽器/版本中仍然需要供應商前綴。爲了更安全一方，您還需要聽取動畫結尾事件的前綴版本。