我尝试使用TransitionGroup
和gsap
设置反应路由器页面的动画
应用
class App extends React.Component {
render() {
return (
<div>
<ul>
//links
</ul>
<div className="detail">
<TransitionGroup component="div">
{this.props.children}
</TransitionGroup>
</div>
</div>
)
}
}
页面组件,只有componentDidMount
操作正在调用和制作动画,componentWillLeave
无效。
class Page extends React.Component {
componentDidMount() {
// working
var dom = ReactDOM.findDOMNode(this)
TweenMax.fromTo(dom, 0.3, {y: 100, opacity: 0}, {y: 0, opacity: 1})
}
render() {
return (
<div>
Page
</div>
)
}
componentWillLeave() {
// not working
var dom = ReactDOM.findDOMNode(this)
TweenMax.fromTo(dom, 0.3, {y: 0, opacity: 1}, {y: 100, opacity:0})
}
}
我很反应,我有每个页面加载和离开的复杂动画,请帮我找到解决方案来解决这个问题。
提前感谢。