使用 Tween TimeLineLite 更改 margin-top答案

【问题标题】：changing margin-top with Tween TimeLineLite使用 Tween TimeLineLite 更改 margin-top
【发布时间】：2014-04-10 17:01:22
【问题描述】：

我在 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】：

这是您的代码工作的 codepen 示例：

确保您使用的是来自 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 制作动画，因此您可以在 to() 补间中将 autoRound:false 添加到您的 CSS 对象，因此 margin-top 不会在亚像素级别上制作动画。

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

autoRound 的参考地址位于：

我希望这会有所帮助！

【讨论】：