TweenLite 动画无法正常工作且没有错误

【问题标题】：TweenLite animation does not work with no errorsTweenLite 动画无法正常工作且没有错误
【发布时间】：2014-03-28 18:34:37
【问题描述】：

我尝试使用 TweenLite 为某些元素设置动画，但没有成功！ console.log 命令有效，没有发生错误，但也没有任何反应。

这是脚本：

<script type="application/javascript">
    window.onload = function(){
        var back = document.getElementById("back");
        var table = document.getElementById("table");

        console.log(table);
        //TweenLite.to(table,4,{top:"4500px" , height:"0px"});
        TweenLite.to(table,4,{top:"4500"});
        TweenLite.to(back, 1.5, {width:100});
    };
</script>

【问题讨论】：

标签： javascript html animation web gsap

【解决方案1】：

如果您想使用 TweenLite JS 脚本为 CSS 属性设置动画，则需要单独包含 GSAP CSSPlugin。

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

如果您只包含TweenMax JS 脚本，那么您不必包含CSSPlugin，因为为了方便，它已包含在TweenMax 中。

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

TweenMax 包括以下内容：

CSSPlugin
RoundProps插件
贝塞尔插件
属性插件
DirectionalRotationPlugin
EasePack
TimelineLite
TimelineMax

希望这会有所帮助！ :)

【讨论】：