Question

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

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

另外，如果动画正在反转，并且你在动画中间悬停它，我希望反转动画停止，然后从那一点向前播放。

我也在使用jquery为元素添加attrs。我是否只需要使用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。< / p>

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

暂停css动画，并从点

1 个答案: