Question

我有一个画布，通过按钮点击向上补间。我试图让它在补间结束后回归，但它只是不起作用。它在屏幕顶部开始很好。我第一次点击按钮它会下降到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>

Answer 1

一旦补间发生，

c.style.top与TweenMax的y修改无关。在第一次调用TweenMax.to时，TweenMax会在对象上创建一个变换矩阵（自定义样式），并从此时起停止关注常规css属性。

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

Answer 2

问题在于，此补间插件实际上会更改transform CSS属性以进行转换。因此，对元素“style.top进行任何更改都不会影响其位置，因为它会被TweenMax特定于浏览器的transform覆盖。

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

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

在javaScript中重置元素的y位置

2 个答案: