Question

我有一个关键帧动画，当我将鼠标悬停在元素上时会播放。 mouseout事件发生后，它会突然停止。我怎么能强迫它发挥直到它结束？我尝试了on.(animationend)事件，它没有用。改变起源和巨大的延迟，要么不起作用。感谢。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

（注意：在上面的演示中，有时动画会在第二次和后续的悬停操作中停止一次。这似乎是Run Snippet窗口的一些小故障。我不知道在编辑的输出窗口或this CodePen demo中看到此问题。如果您遇到同样的问题，请告诉我，我会查看是否有任何修复。）

注意： 上述问题已修复，并且代码段也会使用修订后的代码进行更新。 Revised CodePen Demo

Answer 2

无限动画没有animationend事件。

在鼠标输出后如何强制@keyframes播放到结尾？

2 个答案: