setTimeout的问题

Question

我使用TweenLite来完成一些SVG动画，但由于某种原因，每次我重新加载页面时，第一次将光标悬停在动画元素上时，动画的破坏都是即时的。然后在第一次立即添加悬停效果后，动画正常工作。

CodePen

只需重新加载页面，悬停的对象，你会看到我收到的错误。

$('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，你可能会或可能不会注意到，“fill'动画使用从一定程度上鲜艳的过渡‘无’的紫色。这似乎是因为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。