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類沒有fill ，這意味着它實際上是#000 。

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

這樣就解決了初始動畫 ，您可能注意到，也可能沒有注意到'fill'動畫使用從'nothing'到Purple的較亮的過渡。 這似乎是因為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， 如本筆所示 。