反应路由器组件将不会调用

时间:2016-10-11 17:13:38

标签: javascript animation reactjs react-router gsap

我尝试使用TransitionGroupgsap设置反应路由器页面的动画 应用

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})
    }
}

我很反应,我有每个页面加载和离开的复杂动画,请帮我找到解决方案来解决这个问题。

提前感谢。

0 个答案:

没有答案