Javascript Greensock嵌套的时间线未按预期运行

我有以下代码：

var mainTimeLine = new TimelineLite({paused:true});

var whiteGlow = "0px 0px 30px rgba(255,255,255,0.5), 0px 0px 30px rgba(255,255,255,0.5), 0px 0px 30px rgba(255,255,255,0.5), 0px 0px 30px rgba(255,255,255,0.5)";

var slide1 = document.getElementById("slide1"); //or use jQuery's $("#photo")
var circle11 = document.getElementById("circle1-1"); //or use jQuery's $("#photo")
var circle12 = document.getElementById("circle1-2"); //or use jQuery's $("#photo")
var backgroundLines1 = document.getElementById("backgroundLines1"); //or use jQuery's $("#photo")
//TweenMax.to(backgroundLines1, 2, {right:"100px", repeat:-1, ease:Linear.easeNone});

var text11 = document.getElementById("text1-1"); //or use jQuery's $("#photo")
var text12 = document.getElementById("text1-2"); //or use jQuery's $("#photo")
var text13 = document.getElementById("text1-3"); //or use jQuery's $("#photo")
var man1 = document.getElementById("man1"); //or use jQuery's $("#photo")
var idgLogo = document.getElementById("idg-logo"); //or use jQuery's $("#photo")

var slide2 = document.getElementById("slide2"); //or use jQuery's $("#photo")

var slide3 = document.getElementById("slide3"); //or use jQuery's $("#photo")

//slide1.style.display = 'block';

//slide1.style.display = 'block';
var slide11Timeline = new TimelineLite();
var slide12Timeline = new TimelineLite();

var slide1Timeline = new TimelineLite({paused:false});


slide11Timeline.add([
        TweenLite.to(slide1, 0, {left:"0"}),
        TweenMax.to(circle11, 60, {rotation:360, repeat:-1, ease:Linear.easeNone}),
        TweenMax.to(circle12, 60, {rotation:-360, repeat:-1, ease:Linear.easeNone}),
        TweenLite.from(circle11, 10, {opacity:"0.0"}),
        TweenLite.from(circle12, 10, {opacity:"0.0"}),
        TweenLite.from(text11, 1, {opacity:"0.0"})
    ]);

slide12Timeline
    .from(text11, 1, {top:"-40px", ease:Expo.easeOut,delay:2})
    .to(text11, 2, {
        textShadow:whiteGlow
        //color:"#91ff00"
    })
    .from(text12, 1, {opacity:"0.0"})
    .from(text13, 1, {opacity:"0.0"})
    .from([idgLogo, man1], 1, {opacity:"0.0"})
    .to(slide1, 2, {left:"-10000", delay:2});


slide1Timeline.add([slide11Timeline,slide12Timeline]);


var slide21Timeline = new TimelineLite({paused:false});
slide21Timeline.to(slide2, 1, {left:"0"});

mainTimeLine.add(slide1Timeline);
mainTimeLine.add(slide21Timeline);

mainTimeLine.play();

---

此时，Slide1 Timeline播放，但Slide21 Timeline不播放。我想让他们一个接一个地玩。。。我尝试过各种方法，但都失败了。。。有人能告诉我我做错了什么吗？

我相信问题在于，在Slide11时间线中有几个无限重复的tween，所以它的totalDuration（）基本上是无限的。您正在使用add（）将它们放入主时间线，但请记住，默认情况下，add（）将使用时间线的结尾作为插入点对子项进行排序

由于第一个嵌套时间线的持续时间非常长，因此您永远看不到后续的Slide21时间线动画，因为它在主时间线上的位置在将来是关闭的

但别担心，您完全可以控制插入点的位置，只需使用add（）的第二个参数即可。以下是一些选项：

//to make them both start at 0 (run concurrently):    
mainTimeLine.add(slide1Timeline, 0);
mainTimeLine.add(slide21Timeline, 0);

//or to make slide21Timeline run at the 60-second spot of mainTimeLine:
mainTimeLine.add(slide21Timeline, 60);

---

还要注意的是，如果你想

我相信问题是在Slide11时间线中有几个无限重复的tween，所以它的totalDuration（）基本上是无限的。您正在使用add（）将它们放入主时间线，但请记住，默认情况下，add（）将使用时间线的结尾作为插入点对子项进行排序

由于第一个嵌套时间线的持续时间非常长，因此您永远看不到后续的Slide21时间线动画，因为它在主时间线上的位置在将来是关闭的

但别担心，您完全可以控制插入点的位置，只需使用add（）的第二个参数即可。以下是一些选项：

//to make them both start at 0 (run concurrently):    
mainTimeLine.add(slide1Timeline, 0);
mainTimeLine.add(slide21Timeline, 0);

//or to make slide21Timeline run at the 60-second spot of mainTimeLine:
mainTimeLine.add(slide21Timeline, 60);

---

还请注意，如果您想

首先，如果您在发布之前清理了代码，提供了html+css，或者理想情况下是一个JSFIDLE示例，那将非常棒。另一方面，GreenSock有自己的选择，因此您既不需要getElementById也不需要JQuery。首先，如果您在发布之前清理了代码，提供了html+css，或者理想情况下是一个JSFIDLE示例，这将非常棒。另一方面，GreenSock有自己的选择，因此您不需要getElementById或JQuery。谢谢！事实上，我已经解决了我的问题，通过将无限动画从时间轴上移除，让它单独运行，因此不会出现任何问题。谢谢！事实上，我已经解决了我的问题，通过将无限动画从时间线中移除，让它单独运行，因此不会出现任何问题。