使用 JQuery 事件检测特定的 CSS 关键帧动画答案

【问题标题】：Detecting a specific CSS keyframe animation with JQuery event使用 JQuery 事件检测特定的 CSS 关键帧动画
【发布时间】：2018-02-12 21:55:34
【问题描述】：

我有两个 CSS @keyframe 动画应用于同一个元素。一个在 :hover 上触发，另一个在鼠标移出时触发，两者都应用了 CSS。

我很想知道是否有一种方法可以检测所选关键帧动画的结束，而不是将其附加到元素并触发两次？

【问题讨论】：

只能检测动画何时结束，不能检测单个关键帧。
@MarcosPérezGude 起初我理解你的问题，但现在我认为 OP 只想检测特定的动画结束，而不是每个关键帧。所以哈利的答案是正确的
在这种情况下，两个答案都很好。第一个答案也是正确的。我赞成他们两个
@MarcosPérezGude 但在其他答案中，没有对哪个动画完成进行过滤。我真的猜这就是这个问题的全部意义所在：One that fires on :hover and the other that fires on mouse out & detect the end of a selected keyframe animation rather than it being attached to the element and firing twice
为了好玩（仅限 Chrome），如果您的问题是检测当前正在运行的关键帧：jsfiddle.net/z4ytsesh 在这里使用动画属性以百分比获得进度jsfiddle.net/z4ytsesh/1 我确定这是题外话但是...

标签： javascript jquery html css css-animations

【解决方案1】：

如果有办法检测所选关键帧动画的结束

如果您的意图是检测关键帧动画的结束本身，而不是检测每个关键帧的结束，那么，是的，可以使用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>

在上面的sn-p中，你可以看到.output div的内容是如何表示每个动画完成后结束的动画的名称。

注意： CSS 动画在某些浏览器/版本中仍需要供应商前缀。为了更安全，您还需要监听 animationend 事件的前缀版本。

【讨论】：

【解决方案2】：

试试这个例子：

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
 });
});

【讨论】：