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），它甚至在点击 [= 之前抛出错误14=]。

Uncaught Cannot tween a null target.

如果我像上一句一样用对象初始化它，我在尝试调用tl.to 时遇到错误。具体来说：

Uncaught TypeError: tl.to is not a function

即使 to 在文档中 肯定是 。 tl 对象似乎是 TweenMax 对象：

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

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

知道这里发生了什么吗？这让我非常困惑，因为所有 docs/tutorials 似乎都表明我正在做的事情很好，并且所有相关对象（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';

某种命名空间 clash/overwrite?

Answer 2

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

import TimelineMax from 'gsap/TimelineMax'

Answer 3

我解决了错误：

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

Answer 4

从 'gsap/TimelineMax' 导入 TimelineMax；行得通

Answer 5

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

import {TimelineMax, TweenMax} from 'gsap'

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

TweenMax won't initialize correctly: "Uncaught Cannot tween a null target."

javascript

ecmascript-6

reactjs

gsap