jquery - 悬停时暂停 css 动画，然后从点继续

Question

我正在尝试在悬停时添加 svg 路径动画，并在 mouseOut 上反转动画。

如果 mouseOut 发生在 mouseOn 动画完成之前，我该如何暂停动画，并从该关键帧反转它？

此外，如果动画正在反转，并且您将鼠标悬停在动画中间，我希望反转动画停止，并从该点向前播放。

Please see Fiddle as example

我还使用 jquery 向元素添加属性。我需要只使用 css 来完成这个吗？

$(document).ready(function() {
  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
    $(this).find('circle').fadeIn(100);
    $(this).find('circle').attr("class", "social-circle movingCirc");
    console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle').attr("class", "social-circle removingCirc");
    $(this).find('circle').delay(1900).fadeOut(100);
    console.log("hover off");
  });
});

谢谢你的帮助

Answer 1

我不知道 stroke-dashoffset 动画“停止和反转”是否可以用纯 CSS 动画来完成，但这里有一个 fork of your fiddle使用 jquery animate 的解决方案.

这是javascript:

$(function() {
  var $svg = $('svg');
  var $circle = $('circle', $svg);

  $svg.hover(function() {
    /* Stuff to do when the mouse enters the element */
    $circle
      .stop()
      .animate({
        'stroke-dashoffset': 0
      }, 2000);
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $circle
      .stop()
      .animate({
        'stroke-dashoffset': 900
      }, 2000);
  });
});