鼠标悬停后如何强制@keyframes播放直到结束？答案

【问题标题】：How to force @keyframes play till of its end after on mouseout?鼠标悬停后如何强制@keyframes播放直到结束？
【发布时间】：2017-03-02 15:00:36
【问题描述】：

我有一个关键帧动画，当我将鼠标悬停在元素上时会播放。在mouseout 事件之后，它停止得太突然了。我怎么能强迫它玩到它结束？我试过on.(animationend) 事件，它不起作用。变换原点和巨大的延迟，要么不行。谢谢。

CodePen Demo

class Main {
  constructor() {

  }


  waveOn() {
    $(this).addClass('wave-active');
  }

  waveOut() {
    var elem = $('.info__block');

    elem.removeClass('wave-active');
  }

  jsInit() {
    $('.info__block').hover(this.waveOn);
    $('.info__block').on('animationend', this.waveOut)
  }

}

new Main().jsInit();

.info__block {
  width: 100px;
  height: 100px;
  background: aqua;
  border-radius: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.info__block:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  border-top: 2px solid aqua;
}

.info__block.wave-active:before {
  animation: link-line 2.5s infinite .5s linear;
}

@keyframes link-line {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) scale(1.6);
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info__block info__block-1">
</div>

【问题讨论】：

看起来像是 stackoverflow.com/questions/31806649/… 的骗子。对于您的情况，您基本上应该忘记 :hover 选择器。使用JS触发mouseover上的动画，然后不管鼠标是否在元素上都让动画一直运行到最后。
好的，我找到了问题所在。 (a) 您的 CodePen CSS 不使用 .wave-active 类，它使用 :hover 和 (b) infinite 动画没有 animationend。
在不同的浏览器中，动画的 diff css 属性。例如：IE @keyframes ，firefox @-moz-keyframes。您必须为浏览器提供所有内容
哈利，谢谢。无限没有动画结束的事实解决了这个问题！
@Alex：基于animationiteration 的答案对您没有帮助吗？这不是您想要的吗？

标签： javascript css animation css-animations

【解决方案1】：

这是使用 W3C 动画规范中描述的原生 animationiteration event 来解决您的问题的方法。此事件在动画的每次迭代后触发。所以，我们所做的是，在悬停时，我们附加了animationiteration 事件监听器（由于one，它只会被触发一次）。在此事件的侦听器中，我只是放置了原始 waveOut 函数的内容。因此，每次将鼠标悬停在元素外时，动画都会完成一次迭代（在悬停发生后），然后停止。我认为这比突然结束要优雅得多。

class Main {
  constructor() {}
  jsInit() {
    $('.info__block').hover(function() {
      $('.info__block').off('animationiteration'); /* switch off the event handler when you quickly hover back in again */
      $('.info__block').addClass('wave-active');
    }, function() {
      $('.info__block').one('animationiteration', function() {
        $('.info__block').removeClass('wave-active');
      })
    });
  }
}

new Main().jsInit();

body {
  padding: 200px 200px;
}

.info__block {
  width: 100px;
  height: 100px;
  background: aqua;
  border-radius: 50px;
  position: relative;
  display: flex;
  justify-content: center;
}

.info__block:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  border-top: 2px solid aqua;
}

.info__block.wave-active:before {
  animation: link-line 2.5s infinite .5s linear;
}

@keyframes link-line {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) scale(1.6);
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info__block info__block-1">
</div>

(注意：在上面的演示中，有时动画在第二次和后续悬停操作期间仅一次迭代后停止。这似乎是运行片段窗口的一些故障。我没有看到这个编辑器的输出窗口或this CodePen demo 中发生了问题。如果您也遇到同样的问题，请告诉我，我会看看是否有任何解决方法。)

注意： 上面提到的问题已经修复，sn-p 也更新了修改后的代码。 Revised CodePen Demo.

【讨论】：

【解决方案2】：

无限动画没有animationend事件。

【讨论】：