如何将对象补间到页面上相对于视口或正文的顶部/左侧位置？

Question

我正在使用Greensock库及其TweenLite函数。

我正在尝试让myTarget对相对于视口或主体（或父元素，无论如何）的位置进行补间/动画处理，而不是相对于元素本身。

我该怎么做？

当我运行以下代码时，它将myTarget补间到相对于其自己的起始位置的位置。

TweenLite.to(myTarget, 0.5, { top: '200px', left: '200px'});

Answer 1

JSBIN

注意位置：相对，否则左不会生效。

<强> CSS

div{
  width: 100px;
  height: 100px;
  background-color: #c9c;
  position: relative;

}

<强> JS

var obj = $('div');
var width = $(window).width() - 100;
TweenMax.to(obj,3,{left: width});

Answer 2

与 GSAP 无关。恕我直言，我认为你没有理解CSS的a属性的概念。

在您的情况下，我认为您的父元素需要x和您的子元素，即您的position需要position: relative;。

快速了解jsFiddle以帮助您理解。

此外，请阅读this thorough article，了解CSS-Tricks.com上提供的位置属性。

希望它有所帮助。