Javascript 带有reactJS 15和ReactRouter 4的ReactCSTranssitionGroup

我想为react router创建一个过渡动画，但它似乎不起作用（没有过渡）

正如您在下面所看到的，我所做的只是创建一个组件FadeRoute，它使用ReactCSTranssitionGroup创建一个动画，然后在react路由器dom的switch组件中使用它

这是我的反应代码

import { BrowserRouter as Router,  Switch, Route } from "react-router-dom";
import {  browserHistory } from "react-router";
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'


function FadeRoute({ component: Component, ...rest }) {
    return (
        <Route {...rest} children={({ location, match }) => (
            <ReactCSSTransitionGroup   
                    transitionName="fade"
                    transitionEnterTimeout={300}
                    transitionLeaveTimeout={300}>
            <Component />
        </ReactCSSTransitionGroup>
    )
} />
        );
    }


class App extends React.Component {

    render() {
        return (

            <Router history={browserHistory}>
                <Switch>
                    <FadeRoute exact path="/" component={Home} />
                    <FadeRoute exact path="/NextComponent" component={NextComponent} />
                    <FadeRoute component={NoMatch} />
                </Switch>
            </Router>

        );
    }

}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

你能帮我找一下电话号码吗？

---

提前感谢您

我将整个交换机包装在一个管理CSSTransitionGroup的组件中，从而实现了这一点。CSSTransitionGroup需要同时临时渲染两条路由，以便能够在它们之间淡入淡出，因此它需要位于更高的级别

class Fade extends Component {

    render() {
        return (
            <Route render={({location}) => (
                <CSSTransitionGroup
                    transitionName="fade"
                    transitionEnterTimeout={200}
                    transitionLeaveTimeout={200}
                >
                    {React.cloneElement(this.props.children, {location: location, key: location.key})}
                </CSSTransitionGroup>
            )}/>
        );
    }
}


class App extends Component {

    render() {
        return (
            <BrowserRouter>
                <Fade>
                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route path="/portfolio" component={Portfolio}/>
                        <Route path="/contact" component={Contact}/>
                        <Route component={NoMatch}/>
                    </Switch>
                </Fade>
            </BrowserRouter>
        );
    }
}

类淡入淡出扩展组件{
render（）{
返回(
(
{React.cloneElement（this.props.children，{location:location，key:location.key}}
)}/>
);
}
}
类应用程序扩展组件{
render（）{
返回(
);
}
}

我用类似的解决方案处理这个问题，比如@RichardY和我发布的组件组合，你可以在那里使用所有的转换*参数

编辑：您可以这样使用它：

从“开关css转换组”导入开关CSSTRANSITONGRUOUP
// ...

谢谢，如果我们包装所有的交换机，它是有效的，但我们不能对其进行个性化设置（更改每条路线的过渡组类型：ex fade，slide…）可能不是最优雅的解决方案，但您可以根据fade组件中的位置道具更改过渡名称。。。现在想不出更好的方法。我明白了，通过添加例如switch in Fade组件来检查location.pathname和return transitionName（根据具体情况而定），它可以再次成为解决方案。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效。

class Fade extends Component {

    render() {
        return (
            <Route render={({location}) => (
                <CSSTransitionGroup
                    transitionName="fade"
                    transitionEnterTimeout={200}
                    transitionLeaveTimeout={200}
                >
                    {React.cloneElement(this.props.children, {location: location, key: location.key})}
                </CSSTransitionGroup>
            )}/>
        );
    }
}


class App extends Component {

    render() {
        return (
            <BrowserRouter>
                <Fade>
                    <Switch>
                        <Route exact path="/" component={Home}/>
                        <Route path="/portfolio" component={Portfolio}/>
                        <Route path="/contact" component={Contact}/>
                        <Route component={NoMatch}/>
                    </Switch>
                </Fade>
            </BrowserRouter>
        );
    }
}