TweenMax动画不能正常工作与常见的Java脚本文件

Question

例如，

主页

<div id="box1">Box 1</div> 
<div id="box2">Box 2</div> 
<div id="box3">Box 3</div> 

内页

<!--<div id="box1">Box 1</div> --> 
<div id="box2">Box 2</div> 
<div id="box3">Box 3</div> 

JS多页（共Javascript用于主页和内页。）

new TimelineMax({repeat:0}).to($('#box1'), 0.3, {css:{top:0, alpha:1,rotation:360}}) 
new TimelineMax({repeat:0}).to($('#box2'), 0.3, {css:{top:0, alpha:1,rotation:360}}) 
new TimelineMax({repeat:0}).to($('#box3'), 0.3, {css:{top:0, alpha:1,rotation:360}}) 

在主页上面的代码工作正常..但对于内部页面..如果我删除/评论＃box1其他＃box2和＃box3动画无法正常工作。我如何忽略＃box1动画并继续使用其他动画。

Answer 1

我似乎无法重现该问题。你使用的是最新版本的GreenSock文件吗？你可以发布一个codepen或jsfiddle来演示这个问题吗？

此外，您还可以大大简化代码：

TweenLite.to("#box1, #box2, #box3", 0.3, {top:0, alpha:1, rotation:360}); 

你的代码是不是 “错误” - 只是冗长。如果你没有进行排序，你并不需要使用TimelineMax（尽管如果你更喜欢这个工作流程，那很好）。如果你的意思是测序这些动画，不过，你能做到这一点很容易使用TimelineMax的staggerTo（）方法是这样的：

new TimelineMax().staggerTo(["#box1", "#box2", "#box3"], 0.3, {top:0, alpha:1, rotation:360}, 0.3); 

使用最后一个参数来控制交错/间距。

再一次，确保你已经得到了latest version，并且你正在CSSPlugin和TweenLite加载到该内页。