問題：GreenSock for javascript

Question

我在嵌套時間軸。

代碼如下：

timeLine.to(obj1,1.2,{css:{display:"block"}}) 

nestedTimeline1 = new TimelineMax({repeat:1}); 

// initially obj2 is with opacity :0 

nestedTimeline1.append(TweenLite.to(obj2,1.4,{css:{opacity:1,left:187,bottom:108}})) 
nestedTimeline1.append(TweenLite.to(obj2,.5,{css:{opacity:0}}),-.8) 

timeLine.append(nestedTimeline1); 

當我這樣做：

timeLine.totalProgress(0); 

我的動畫將首先啓動。但問題是obj2不透明度將不會重置爲0.

我無法理解爲什麼會出現此問題？

任何解決方案將不勝感激。

Answer 1

讓我們從第一行開始。

您不能動畫到display:block - 沒有數字值來設置動畫。您可以將opacity:0設置爲opacity:1即可。

現在，讓我們來思考下一個問題。
您正試圖通過1.4秒以上動畫opacity至1。
您的下一個補間動畫從秒以上的相同對象動畫到0，偏移量爲-0.8秒。

我不確定你是否看到這裏的錯誤，但讓我們把它分解成一個視覺表示。

-------------------------------------------------- <-- Tween 1 
          ---------------   <-- Tween 2 

你看，吐溫2完成吐溫1 前，因爲你在時間軸0.8秒推回去，然後它只能運行於0.5秒。所以吐溫1現在有最終0.3秒動畫回opacity:1

另外，作爲一個側面說明，您可以用方便的方法，而不是.append(TweenLite...
nestedTimeline1.to(...)做同樣的事情。