TweenMax не работает

Question

Всякий раз, когда я пытаюсь использовать TweenMax, анимация работает, но продолжительность анимации равна 0, даже когда я указываю продолжительность! Это мой CoffeeScript код:

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

Answer 1

В документации, это выглядит, как если бы первый аргумент метода .to() ожидает объект JQuery, а не строка.

Может попробовать это:

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

Или это:

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

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

Вот ссылка на Cheatsheet я ссылка:

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

Answer 2

В GSAP target принимает string, array , или jQuery collection wrapper.

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

Если вы используете ваш сайт с CMS, который использует JQuery вы можете определить свой селектор двигателя:

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

Иногда система CMS может взять на себя ответственность символа фабрики $

// 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"}) 

Как только вы определяете свой селектор, чем можете использовать его, как вы делали, как строку, без jQuery c обертка обертки. GSAP принимает

цель: Object

Целевой объект (или массив объектов), свойства которого должны быть затронуты. При анимации элементов DOM целью может быть: один элемент , массив элементов, объект jQuery (или аналогичный) или строка селектора CSS , например «#feature» или «h2.author». GSAP передает селекторные строки в механизм селектора, такой как jQuery или Sizzle (если один из них , обнаруженный или определенный через TweenLite.selector), возвращается к document.querySelectorAll().

Но имейте в виду, что вам нужно только определить TweenLite.selector, если вы используете GSAP в веб-сайт, который взял в собственность символа фабрики $