TweenLite动画不起作用,没有错误

时间:2014-03-28 18:34:37

标签: javascript html animation web tweenlite

我尝试使用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>

1 个答案:

答案 0 :(得分:6)

如果您想使用 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
  • RoundPropsPlugin
  • BezierPlugin
  • AttrPlugin
  • DirectionalRotationPlugin
  • EasePack
  • TimelineLite
  • TimelineMax

希望这有帮助! :)