TweenMax无法正确初始化："未捕获的无法对空目标进行补间。"

Question

在我的应用程序中，我正在尝试使用GSAP的TweenMax/TimelineMax库来动画化更改，但是我在代码早期遇到了错误。简化后（这是一个使用ES6的React/Redux应用程序）：

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}) 这样 -- （尽管文档说它的默认构造函数参数是null），它在甚至到达console.log('here')之前就会抛出错误。

未捕获的无法补间空目标。

如果我像上一句话那样使用对象进行初始化，则在尝试调用tl.to时会出现错误。具体来说：

Uncaught TypeError: tl.to不是一个函数

即使to在文档中明确存在。 tl对象似乎是一个TweenMax对象：

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

但它没有响应大多数方法，包括add和许多其他方法。

你知道这里发生了什么吗？对我来说非常困惑，因为所有文档/教程似乎都表明我所做的是正确的，而且所有相关的对象（mailboxDropdown等）似乎都被正确定义。

- Sasha

Answer 1

在发布这个问题之前（在大量搜索和盲目尝试之后），我发现问题实际上与导入有关。我不确定为什么，但是删除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';

某种名称空间冲突/覆盖？

- Sasha

Answer 2

根据Greensock NPM文档，您可以使用括号表示法指定单独的导出项：

import {TimelineMax, TweenMax} from 'gsap'

- benjarwar

Answer 3

从'gsap/TimelineMax'导入TimelineMax;
它能正常工作。

- Majid Eltayeb

Answer 4

我解决了这个错误：

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';

- Hugo Wesley

Answer 5

NPM模块尚未正确提交。请使用

import TimelineMax from 'gsap/TimelineMax'

- Andrew Vorobyov