Css关键帧循环，完成多个动画元素上的动画迭代答案

【问题标题】：Css keyframe loop, finish iteration of animation on element with multiple animationsCss关键帧循环，完成多个动画元素上的动画迭代
【发布时间】：2022-01-21 01:28:53
【问题描述】：

我有一个循环的 css 关键帧动画。 animation-iteration-count: infinite 现在，当我单击一个按钮时，我希望动画完成当前循环然后停止。

this 问题似乎相关，但animationiteration webkitAnimationIteration 回调似乎不会在关键帧动画结束时被调用，但更频繁。

编辑：事实证明这几乎是正确的解决方案，只是它不能处理多个动画。有关更多信息，请参阅下面的答案。

This example 显示我的动画，悬停时我想尝试完成当前循环然后停止。这包括@Alex Gru 提出的答案，如果等待动画循环多次然后悬停您可以看到动画跳跃，则它不起作用。如果它没有循环完整的迭代并且我设置了animation-iteration-count: 1，它会按预期工作。

【问题讨论】：

“我尝试过使用 webkitAnimationIteration 来计算迭代次数，但该计数似乎与到目前为止的循环数量没有直接关系。” - 究竟是什么意思?请不要给我们一个过于模糊的陈述，说您尝试了某些东西但它没有用，但要明确 - minimal reproducible example 您尝试了什么，加上适当的问题描述。
document.getElementById("animated-thing").addEventListener("webkitAnimationIteration", function (event) { 但是在循环结束时不会调用该函数，而是在两者之间更频繁地调用。
这不一定与我尝试过的问题有关。
我已经重新设计了这个问题。这次不包括不起作用的东西。不需要一个最小的例子，因为解释错误的方法 - 可能会帮助人们提供帮助 - 但肯定会使问题复杂化。

标签： html jquery css animation

【解决方案1】：

这是您的用例的最小解决方案：

首先，当你想完成动画时，添加另一个类.stop。

  $(".target").addClass("stop");

定义以下css样式，结束当前循环，之后停止动画。

.target.stop {
  -webkit-animation-iteration-count: 1;
  animation: none;
}

另见：Finish infinite iterations cycle and stop the animation with CSS

【讨论】：

animation: none 立即停止它。如果我只使用-webkit-animation-iteration-count: 1 它可以工作，但前提是动画还没有播放完整的迭代。如果动画循环例如：3 次，如果我设置 `-webkit-animation-iteration-count: 1` 它只是跳转到动画的结尾
我添加了一个显示问题的 jsfiddle。在这里，我在悬停时添加了 stop 类。如果您等待动画循环不止一次然后悬停，您可以看到它 jump
基本上我需要一种方法来设置-webkit-animation-iteration-count: current-count + 1

【解决方案2】：

所以我发现了它为什么不起作用。毕竟还有一些关于我是如何让它工作的额外信息，我将在这里解释。

这是我的错，因为附加了另一个动画子元素：

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

我希望这个解决方案可以帮助那些试图处理应用于一个元素（或子元素）的多个循环动画

的人

感谢所有提供帮助的人！（我调整了问题的标题，以突出问题的实质）

【讨论】：