TweenMax将无法正确初始化:"Uncaught无法补间空目标."

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})- (虽然文档说它的默认构造函数是arg null),它甚至在击中之前就会抛出一个错误console.log('here').

未捕获无法补间空目标.

如果我这样做有一个对象作为前一句初始化它,我打了一个错误,当我尝试调用tl.to.特别:

未捕获的TypeError:tl.to不是函数

即使to是肯定的文档.该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';

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