В моем приложении я пытаюсь использовать библиотеки TweenMax / TimelineMax GSAP для анимации изменений, но я столкнулся с ранней ошибкой в моем коде. Упрощено (это приложение React / Redux, использующее ES6):

import TimelineMax from 'gsap';
import TweenMax from 'gsap';
import GSAP from 'gsap-react-plugin';
import ReactDOM from 'react-dom';

someFunction() {
    var mailboxDropdown = ReactDOM.findDOMNode( this.refs.mailboxDropdown );
    // TweenLite.to(this, 0.1, { "y-offset": '-50px', 'opacity' : 0 });
    console.log(mailboxDropdown)
    var tl = new TimelineMax();
    console.log('here');
    tl.to(mailboxDropdown, 0.4, { "y-offset": '-50px' }, 'slideUp' )
    tl.to(mailboxDropdown, 1, { opacity: 0 }, 'slideUp-=.5');
};

Ошибки странные. Во-первых, если я не инициализирую TimelineMax с объектом - что-то вроде new TimelineMax({repeat: 1}) - (хотя в документах говорится, что его конструктор по умолчанию arg равен null), он выдает ошибку, даже не нажав {{ X2 } } .

Uncaught Не может анимация нулевой цели.

Если я do инициализирую его объектом, как в предыдущем предложении, я получаю сообщение об ошибке при попытке вызвать tl.to. В частности :

Uncaught TypeError: tl.to не является функцией

Хотя to определенно находится в документах. Объект tl представляется объектом TweenMax:

TweenMax {vars: Object, _totalDuration: 0, _duration: 0, _delay: 0, _timeScale: 1…}

Но он не отвечает на большинство методов, включая add и кучу других.

Есть идеи, что здесь происходит? Меня это очень смущает, потому что все документы / учебные пособия показывают, что все, что я делаю, хорошо, а все соответствующие объекты (mailboxDropdown и т. Д.) Кажутся правильно определенными.

7
Sasha 15 Дек 2015 в 22:19

5 ответов

Лучший ответ

Перед публикацией этого вопроса (и после долгих поисков и слепых экспериментов) я обнаружил, что проблема на самом деле связана с импортом. Я не уверен, почему , но удаляю импорт TimelineMax исправленных вещей, чтобы все в исходном коде работало нормально. То есть мой импорт должен был быть таким:

import TweenMax from 'gsap';
import GSAP from 'gsap-react-plugin';
import ReactDOM from 'react-dom';

Не этот:

import TimelineMax from 'gsap';
import TweenMax from 'gsap';
import GSAP from 'gsap-react-plugin';
import ReactDOM from 'react-dom';

Какое-то столкновение / перезапись пространства имен?

6
Sasha 15 Дек 2015 в 19:19

В соответствии с документами Greensock NPM вы можете указать отдельные экспорты, используя обозначения в скобках:

import {TimelineMax, TweenMax} from 'gsap'
1
benjarwar 30 Мар 2018 в 15:27

Модуль NPM еще не представлен должным образом. использование

import TimelineMax from 'gsap/TimelineMax'
0
Andrew Vorobyov 26 Ноя 2017 в 15:05

Я устранил ошибку:

Uncaught Cannot tween a null target.

Импортируя этот путь:

import React, { Component } from 'react'; 
import TweenMax, {Power4} from 'gsap/src/uncompressed/TweenMax';
import EasePack from 'gsap/src/uncompressed/easing/EasePack';
import TimelineMax from 'gsap/src/uncompressed/TimelineMax';
0
Hugo Wesley 11 Фев 2018 в 07:25

Импортировать TimelineMax из 'gsap / TimelineMax'; Это работает

0
Majid Eltayeb 24 Мар 2018 в 16:04