TweenMax动画不适用于具有常见java脚本文件的多个页面(TweenMax animation is not working for multiple pages with common jav

TweenMax动画不适用于具有常见java脚本文件的多个页面(TweenMax animation is not working for multiple pages with common java script file)

例如，

主页

<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动画并继续使用其他动画。

For Instance,

Home page

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

inner page

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

JS: (Common Javascript for home page and inner page.)

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}})

In Home page above code works fine..But for inner pages.. If i delete/comment #box1 the other #box2 and #box3 animation is not working. How can I ignore #box1 animation and continue with another animations.

最满意答案

我似乎无法重现这个问题。 您使用的是最新版本的GreenSock文件吗？ 你可以发一个代码表或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);

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

再次，确保您已获得最新版本 ，并且您正在该内页上加载CSSPlugin和TweenLite。

I can't seem to reproduce that issue. Are you using the latest version of the GreenSock files? Could you post a codepen or jsfiddle that demonstrates the problem?

Also, you could greatly simplify your code:

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

Your code wasn't "wrong" - just verbose. And if you're not doing sequencing, you don't really need to use TimelineMax (although it's perfectly fine if you prefer that workflow). If you meant to sequence those animations, though, you could do that easily using TimelineMax's staggerTo() method like this:

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

Use that last parameter to control the stagger/spacing.

Again, make sure you've got the latest version and that you're loading CSSPlugin and TweenLite on that inner page.