使用Tween TimeLineLite更改margin-top

Question

我在HTML中有一个带有以下css的简单DIV块：

#vogelhuisje {
    display: block;
    width: 320px;
    height: 380px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
}

现在我尝试通过在5秒内更改margin-top来添加一些简单的动画。

var myBannerTimeline = new TimelineLite();
myBannerTimeline.from('#vogelhuisje', 5, {css:{marginTop:400}, ease:Bounce.easeOut});

但它不起作用。知道我做错了什么吗？ 绝对的顶部和左侧我可以使这个工作，但希望网站响应，因此div总是在中心与边缘。

Answer 1

以下是代码工作的代码示例：

http://codepen.io/jonathan/pen/njxuz

确保您使用的是CDN的最新GSAP版本。在撰写本文时，版本为 1.13.2

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>

或者，您也可以将position:relative;添加到#vogelhuisje元素中。但请注意，当您使用位置absolute时，动画将执行更好的跨浏览器，因此它会将元素从文档流中取出。

此外，由于您要设置margin-top动画，因此可以将autoRound:false添加到to()补间中的CSS对象中，因此margin-top不会对子动画进行动画处理像素级别。

var myBannerTimeline = new TimelineLite();
myBannerTimeline.from('#vogelhuisje', 5, {css:{marginTop:400,autoRound:false}, ease:Bounce.easeOut});

autoRound的参考位于：

GSAP CSSPlugin Docs

我希望这有帮助！