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')之前抛出错误1}}。

未捕获无法补间空目标。

如果我执行使用上一句中的对象初始化它，我在尝试调用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';

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

Answer 2

根据Greensock NPM docs，您可以使用括号表示法指定单个导出：

import {TimelineMax, TweenMax} from 'gsap'

Answer 3

我解决了错误：

:read-write

通过这种方式导入：

Uncaught Cannot tween a null target.

Answer 4

从'gsap / TimelineMax'导入TimelineMax; 那是有效的

TweenMax将无法正确初始化：“Uncaught无法补间空目标。”

4 个答案: