使用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动画在某些浏览器/版本中仍然需要供应商前缀。为了更安全一方，您还需要听取动画结尾事件的前缀版本。