TweenMax funktioniert nicht

Question

Immer wenn ich versuche, TweenMax zu verwenden, funktioniert die Animation, aber die Dauer der Animation ist 0, auch wenn ich die Dauer angeben! Das ist mein Coffeescript-Code:

$ -> 
     $("header").click -> 
     TweenLite.to("header", 0.5, {"background-color": "coral"}) 

Answer 1

In der Dokumentation, es sieht aus, als ob das erste Argument für die .to() Methode ein Objekt jQuery erwartet, keinen String.

Vielleicht versuchen:

$ -> 
    $("header").click -> 
    TweenLite.to($(this), 0.5, { "background-color": "coral" }) 

Oder diese:

$ -> 
    $header = $("header") 

    $header.click -> 
    TweenLite.to($header, 0.5, { "background-color": "coral" }) 

Hier ist ein Link auf die Spickzettel I verwiesen:

https://ihatetomatoes.net/wp-content/uploads/2015/08/GreenSock-Cheatsheet2.png

Answer 2

In GSAP die target nimmt ein string, array oder jQuery collection wrapper.

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/to/

Wenn Ihre Website mit einem CMS, die jQuery verwendet, die Sie Ihr Selektor-Engine definieren könnten:

// place above all your TweenLite code 
TweenLite.selector = jQuery; 

Manchmal ist ein CMS-System könnte das Eigentum an der Fabrik Symbol nehmen $

// define selector for simple selectors to work with GSAP and a CMS 
TweenLite.selector = jQuery; 

// then add your code like you have above 
$ -> 
    $("header").click -> 
    TweenLite.to("header", 0.5, {"background-color": "coral"}) 

Sobald Sie Ihren Selektor definiert haben, können Sie ihn wie gewohnt als String ohne jQuery c verwenden ollection wrapper. GSAP nimmt

target: Object

Zielobjekt (oder einer Anordnung von Objekten), deren Eigenschaften sollten berührt. Beim Animieren von DOM-Elementen kann das Ziel sein: ein einzelnes -Element, ein Array von Elementen, ein jQuery-Objekt (oder Ähnliches) oder eine CSS- -Selektorzeichenfolge wie "#feature" oder "h2.author". GSAP übergibt Selektor-Zeichenfolgen an eine Selektor-Engine wie jQuery oder Sizzle (wenn eine erkannt oder über TweenLite.selector definiert wurde) und fällt zurück auf document.querySelectorAll().

Aber bedenken Sie müssen nur TweenLite.selector definieren, wenn Ihre GSAP in einer Website verwenden, das Eigentum an der Fabrik Symbol $