在我的应用程序中,我正在尝试使用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
等)似乎都是正确定义的.
在发布这个问题之前(经过多次搜索和盲目实验)之后,我发现问题实际上与导入问题有关.我不知道为什么,但删除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';
某种命名空间冲突/覆盖?