javascript - TweenMax 无法正确初始化 : "Uncaught Cannot tween a null target."

Question

在我的应用程序中，我尝试使用 TweenMax/TimelineMax libraries of GSAP动画变化，但我在我的代码中遇到了一个早期错误。简化(这是一个使用 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})——(尽管文档说它的默认构造函数 arg 是 null)，它甚至在到达 console.log('here') 之前就抛出错误。

Uncaught Cannot tween a null target.

如果我做用一个对象初始化它，就像在前面的句子中那样，我在尝试调用tl.to 时遇到错误。具体来说:

Uncaught TypeError: tl.to is not a function

尽管 to 在文档中是 definitely 。 tl 对象似乎是一个 TweenMax 对象:

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

但它不响应大多数方法，包括 add 和其他一些方法。

知道这里发生了什么吗？这让我非常困惑，因为所有文档/教程似乎都表明我所做的很好，并且所有相关对象(mailboxDropdown 等)似乎都已正确定义。

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

某种 namespace 冲突/覆盖？