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

在我的应用程序中，我试图使用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')之前都会引发错误。



如果像上一句话那样用对进行初始化，则在尝试调用tl.to时遇到错误。特别:



即使to是，在文档中也绝对是。 tl对象似乎是TweenMax对象:



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

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

最佳答案

在发布此问题之前(经过大量搜索和盲目试验)，我发现问题实际上与导入有关。我不确定为什么是，但是删除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 冲突/覆盖？