【问题标题】: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 始终位于中心并有边距。

【问题讨论】:

    标签: css animation margin tween gsap


    【解决方案1】:

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

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

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

    autoRound 的参考地址位于:

    GSAP CSSPlugin Docs.

    我希望这会有所帮助!

    【讨论】:

      猜你喜欢
      • 2013-07-16
      • 1970-01-01
      • 2013-04-21
      • 2011-09-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-09-22
      相关资源
      最近更新 更多