setTimeout 的问题

Question

我正在使用 TweenLite 来完成一些 SVG 动画，但出于某种原因，每次我重新加载页面时，第一次将元素悬停在动画上时，动画的持续时间是即时的。然后第一次瞬间添加悬停效果后，动画正常。

只需重新加载页面，将鼠标悬停在对象上，您就会看到我收到的错误消息。

  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
    var currentCirc = $(this).find('.social-circle');
      currentCirc.stop()
      .animate({'stroke-dashoffset': 0}, 1000);
      TweenLite.to(currentCirc, 1, {fill:'rgb(144, 17, 133)'});
      console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    var currentCirc = $(this).find('.social-circle');
      currentCirc.stop()
      .animate({
        'stroke-dashoffset': 900
      }, 1000);
      TweenLite.to(currentCirc, 1, {fill:'none'});
      // .css('fill', 'none');
  });

感谢您的宝贵时间！

Answer 1

主要问题不在javascript，而在CSS。 .social-circle class 没有 fill，这意味着它实际上是 #000.

.social-circle {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    fill: rgba(144, 17, 133, 0);
}

这个 solves the initial animation，您可能注意到也可能没有注意到 'fill'-动画使用了从 'nothing' 到紫色的有点 bright-colored 的过渡。这似乎是因为 TweenLite 将 fill: 'none' 解释为 fill: rgba(255, 255, 255, 0)（后者是透明的白色，它本身是不可见的，但过渡中的步骤是）。这就是为什么我在上面的代码中选择了你的颜色的透明版本。

既然您的问题已经得到解答，我觉得我应该花些时间来帮助您降低解决方案的整体复杂性。在我看来，您使用了两个不同的（而且相当大）javascript 库来实现本应非常简单的 CSS 声明。

.social-circle {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    fill: rgba(144, 17, 133, 0);
    transition: stroke-dashoffset 1s linear, fill 1s ease-in-out;
}
.social-circle:hover {
    stroke-dashoffset: 0;
    fill: rgba(144, 17, 133, 1);
}

使用此样式，您可以删除 javascript、as demonstrated in this pen 的所有。

setTimeout 的问题

Issues with setTimeout

jquery

animation

svg

gsap