Question

我刚尝试了TweenLite，我很疯狂，因为我从网站上复制了代码，但我无法将其设置为动画。

CSS

.box{
  width: 100px;
  height: 300px;
  background-color: red;
}

HTML

<div class="box"></div>

JS

   setTimeout(function(){
        var target = $('.box');
        console.log("box = ", target);
        TweenLite.to(target, 1, {css:{height:"0px"}});
    },2000);

也试过没有css。

   setTimeout(function(){
        var target = $('.box');
        console.log("box = ", target);
        TweenLite.to(target, 1, {height:0});
    },2000);

是的，我在jquery文档就绪方法中有JS。我也加载了TweenLite.js。任何人都知道我错过了什么。

Answer 1

不确定您的设置究竟发生了什么，但代码适用于我。这是一个codepen：

http://codepen.io/GreenSock/pen/9e7c951949caa10b928d929378947f01

虽然您使用的长手风格很好，但我也简化了代码。您不需要使用setTimeout（）来延迟启动 - 只需使用“delay”特殊属性即可。

TweenLite.to(".box", 1, {height:0, delay:2});

我想知道是否可能在您的特定设置中没有加载jQuery或GreenSock JavaScript文件。如果您仍然遇到问题，请发布一个链接到一个简单的codepen或jsfiddle，我们将看一看。

TweenLite js没有动画高度

1 个答案: