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。