在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