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课程没有fill，这意味着它实际上是#000。

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

这个solves the initial animation，你可能已经注意到了“填充”动画使用了一个有点颜色鲜明的过渡，从“没有任何事情”开始。到了紫色。这似乎是因为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的问题

1 个答案: