使用Tween TimeLineLite更改margin-top

时间:2014-04-10 17:01:22

标签: css3 animation margin tween tweenmax

我在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总是在中心与边缘。

1 个答案:

答案 0 :(得分:0)

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

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

我希望这有帮助!