在javaScript中重置元素的y位置

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进行任何更改style.top不会影响其位置，因为TweenMax的特定于浏览器的transform会覆盖它。

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

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

在javaScript中重置元素的y位置

问题描述

2 个解决方案

解决方案1
0 2013-08-25 10:52:11

解决方案2
0 2013-08-25 10:54:31

在javaScript中重置元素的y位置

问题描述

2 个解决方案

解决方案1 0 2013-08-25 10:52:11

解决方案2 0 2013-08-25 10:54:31

解决方案1
0 2013-08-25 10:52:11

解决方案2
0 2013-08-25 10:54:31