javascript - 向下滚动时，如何使动画持续“n”秒？

Question

我做了这个例子来试图解释我的问题。

我有一个 .square 类的元素，我希望当触发相同的触发器.square并且过渡持续10真正的秒数时，也就是说，在它打开时向下滚动的移动.square持续 10 秒直到出来其中。

    squareScroll.to(".square", 10,{autoAlpha:1})

目前我的问题是它不需要 10 秒。换句话说，我需要从开始到结束到最后 10 秒的过渡。

我该怎么做？

这是我的代码：

http://plnkr.co/edit/XoSHncr8lKhNSYs2?open=lib%2Fscript.js

   <div style="height:700px"></div>
   <div class="square"></div>
   <div style="height:1000px"></div>


    var controller = new ScrollMagic.Controller();

    var squareScroll= new TimelineMax();

    squareScroll.to(".square", 10,{autoAlpha:1})


    var scene = new ScrollMagic.Scene({
        triggerElement: ".square",
        triggerHook:0.8,
        duration: "100%"
        })
        .setTween(squareScroll)
        .addIndicators()
        .addTo(controller);

标签： javascriptscrollmagic