react-router路由切换添加动画

Question

在路由跳转过程中添加动画效果，比如简单的fadeIn，fadeOut等，我的方法是用'react-addons-transition-group'来做。比如

<App>
    <ReactTransitionGroup component="div">
        {this.props.children}
    </ReactTransitionGroup>
</App>

对应的children组件里添加一些过渡hook，比如

class Children extends Component {
    componentWillUnmount() {
        clearTimeout(this.enterTimer);
        clearTimeout(this.leaveTimer);
    }

    componentWillAppear(callback) {
        this.initAnimation(callback);
    }

    componentWillEnter(callback) {
        this.initAnimation(callback);
    }

    componentDidAppear() {
        this.animate();
    }

    componentDidEnter() {
        this.animate();
    }

    componentWillLeave(callback) {
        const style = this.component.style;
        style.opacity = 0;
        this.leaveTimer = setTimeout(callback, 0);
    }

    animate() {
        const style = this.component.style;
        const opacity = 'opacity 1000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms';
       
        style.opacity = 1;
        style.transition = opacity;
    }

    initAnimation(callback) {
        const style = this.component.style;
        style.opacity = 0;
        
        this.enterTimer = setTimeout(callback, 0);
    }
    
    render() {
        return <div>嘿嘿嘿</div>;
    }
}

事实上，在路由切换的时候什么也没发生，钩子函数根本没有被调用。只有在组件在第一次加载时才有动画效果，而路由切换时无。谢谢大家！

Answer 1

两个方案：

---

1、全局挂载动画组件

• 在全局挂载动画组件，比如Nprogress；

• 在路由切换时，可以获取到上一个页面的onLeave方法（这个方法是react-router的api），在这个方法中调用NProgress.start()；

• 然后在每一个路由配置中，即react-router中的component使用按需加载，即require.ensure或者react-router-proxy;

• 在路由的component组件的入口处（是module的全局而非class的constructor）执行Nprogress.done(true);

---

2、将state挂载全局

• 将全局唯一的state（可以是挂载在redux上的state，也可以直接挂载在window对象上）作为动画加载标识；

• 在路由的component中的componentWillUnmount中修改标识为动画中，componentWillMount中修改标识为加载动画；

• 监听全局的state的改变，触发顶层挂载的动画组件的变化；

---

总结：

大概就是两种模式：观察者模式，或者发布订阅模式。

Answer 2

有解决么，我现在也碰到这个问题

Answer 3

之前碰到过这个问题，是因为使用了Redux跟react-redux库，跟router导致的冲突，而导致动画不起作用。

Answer 4

推荐使用 ant motion : http://motion.ant.design queu-anim 和 tween-one-group 都可以解决router 切换添加动画

Answer 5

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script type="text/javascript" src="js/react-router/umd/ReactRouter.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6-dist/js/jquery-1.11.3.js"></script>
<script type="text/babel">

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'

var App = React.createClass({
    render:function(){
        return (
                <div>
                    <h1>App</h1>
                    {/* 把`a`标签换成`Link`标签 */}
                    <ul>
                        <li><Link to="/about">About</Link></li>
                        <li><Link to="/inbox">Inbox</Link></li>
                    </ul>

                    {/*
                     把`<Child>`替换成`this.props.children`
                     路由会渲染正确的组件
                     */}
                    {this.props.children}
                </div>
        )
    }
})
ReactDOM.render((
        <Router>
            <Route path="/" component={App}>
                <Route path="about" component={About} />
                <Route path="inbox" component={Inbox} />
            </Route>
        </Router>
), document.body)

</script>
楼主我问下你怎么导的route进去，我这么弄怎么都不行，必须用webpack么？