0

我有一个通过按钮单击向上补间的画布。我试图让它在补间结束后恢复，但它不起作用。它在屏幕顶部开始正常。我第一次单击该按钮时，它确实下降到 400，然后滑到 200。但是在下一次单击时 - 它只会继续向上飞行，而不是先回到 400。请帮忙！:)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <script src=
    "http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
</head>

<body>
    <button onclick="func();">click</button> <canvas height="100" id="canvas"
    style="position:absolute; top:50px; border:3px solid #000000;" width=
    "200"></canvas> 
    <script>
           var c = document.getElementById("canvas");
            function func(){             
                c.style.top = 400 + "px";
                TweenMax.to(c,2,{y: "-=200", onComplete:foo});
            }
            function foo(){
              c.style.top = "400px";
            }
    </script>
</body>
</html>
4

2 回答 2

0

c.style.topy补间发生后，与 TweenMax 的修改无关。在第一次调用 时TweenMax.to，TweenMax 在对象上创建一个变换矩阵（自定义样式），并从此不再关注常规 css 属性。

您必须startAt: {y: '400px'}在.to调用中定义强制 TweenMax 将补间重置为静态值。

于 2013-08-25T10:52:11.770 回答
0

问题是这个补间插件实际上改变transform了 CSS 属性来进行过渡。因此，对元素进行任何更改style.top都不会影响其位置，因为它被 TweenMax 的特定于浏览器的transform.

您可以使用它们的startAt属性始终从所需位置开始。不过我不推荐这个插件，我个人更喜欢jQuery。

演示：http: //jsfiddle.net/TyZhB/2/

于 2013-08-25T10:54:31.210 回答