TweenLite没有动画 [英] TweenLite does not animate

问题描述

我想使用GreenSocks TweenLite for Javascript做一个简单的顶部边缘动画。我已经使用了很多次的库，但是，由于某种原因，这不是这个时候工作。注意：onComplete是启动，但是，无论我使用什么元素，我不能动画HTML元素的任何CSS属性。

HTML

 < div id =GS_PipelineHeadline h2> ;< / div> 
  

JAVASCRIPT

  TweenLite.to（＃GS_PipelineHeadline h2，0.5，
 {
margin-top：0，
 ease：Back.easeOut，
 onComplete ：function（）
 {
 console.log（Crap）; 
} 
}）; 
  

这是一个真正的快速JSFiddle我创建，包括所有的CSS，JS和HTML。
http://jsfiddle.net/mBPug/

如果有任何想法，我会很感激的。

解决方案

b
$ b

• 添加 CSS插件到你的小提琴


• margin-top不会做太多，使用 top 而不是

。

  TweenLite.to（＃GS_PipelineHeadline，0.5，{
 top：0，
 ease：Back.easeOut，
 onComplete：function b $ b console.log（Crap）; 
} 
}）; 
  

http://jsfiddle.net/mBPug/4/

I am trying to do a simple animation of top-margin using GreenSocks TweenLite for Javascript. I've used the library many times but, for some reason, it's not working this time. Note: The "onComplete" is firing but, no matter what element I use, I cannot animate any CSS properties on HTML elements.

HTML

<div id="GS_PipelineHeadline h2"></div>

JAVASCRIPT

TweenLite.to("#GS_PipelineHeadline h2", 0.5, 
{ 
    "margin-top": 0, 
    ease: "Back.easeOut", 
    onComplete: function () 
    { 
        console.log("Crap"); 
    } 
});

Here is a real quick JSFiddle I created that includes all the CSS, JS and HTML. http://jsfiddle.net/mBPug/

If anyone has any ideas, I would appreciate it!

解决方案

A few things:

• add the CSS plugin to your fiddle
• "margin-top" wasn't going to do much, use top instead

.

TweenLite.to("#GS_PipelineHeadline", 0.5, {
    top: 0,
    ease: Back.easeOut,
    onComplete: function () {
        console.log("Crap");
    }
});

http://jsfiddle.net/mBPug/4/

这篇关于TweenLite没有动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！