javascript - TweenLite 动画无法正常工作

Question

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

Answer 1

如果你想用 动画化 CSS 属性 TweenLite JS 脚本，您需要包含 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 包括以下内容:

• CSS插件
• RoundPropsPlugin
• 贝塞尔插件
• 属性插件
• DirectionalRotationPlugin
• 易包
• 时间轴精简版
• 时间线最长

希望对您有所帮助! :)