ReactCSSTransitionGroup 离开动画不适用于 Route

Question

正确应用输入动画。组件似乎在应用任何离开、离开活动的类之前卸载。

  componentWillMount() {
    this.setState({
            routes: [(<Route exact path='/' component={HomeView}/>),
               (<Route exact path='/account' component={YourAccountView}/>),
               (<Route exact path='/settings' component={SettingsView}/>),
               (<Route exact path='/about' component={AboutView}/>),
               (<Route exact path='/machine/:_id' component={MachineDetailView}/>),
               (<Route exact path='/floorview' component={FloorView}/>)]
          })     
  }

  render() {
     return (
        <div>
            <NavBar/>                
               <div style={{position: 'relative', flexGrow: 1 , marginTop:40+'px'}}>
                      <ReactCSSTransitionGroup
                        transitionName="pageSlider"
                        transitionEnter={true}
                        transitionLeave={true}
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={500}>
                          {this.state.routes
                            .filter((e)=> e.props.path===this.context.router.history.location.pathname )
                            .map((e)=> React.cloneElement(e, { key: this.context.router.history.location.pathname} ))}
                 </ReactCSSTransitionGroup> 

              </div> 
         </div>
    );
  }

我不知道这是 ReactCSSTransitionGroup 的事情，还是 React-Router v4 安装/卸载的事情。有没有人遇到并解决过类似的问题？

Answer 1

这种情况有效： index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.render(
    <BrowserRouter>
        <Route path="/" component={App}/>
    </BrowserRouter>
  ,
  document.getElementById('root')
);

App.js

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './App.css';

const One = ({match}) => (
    <h2>{match.url}</h2>
  )
const Two = ({match}) => (
    <h2>{match.url}</h2>
  )
const Three = ({match}) => (
    <h2>{match.url}</h2>
  )
const Four = ({match}) => (
    <h2>{match.url}</h2>
  )

const MyNav = () => (
    <div>
      <Link to='/One'>One</Link>
      <Link to='/Two'>Two</Link>
      <Link to='/Three'>Three</Link>
      <Link to='/Four'>Four</Link>
    </div>
  )

class App extends Component {
componentWillMount() {
this.setState({routeKey:this.props.location.pathname})
this.setState({routes: [
  (<Route exact path="/One" component={One}/>),
  (<Route exact path="/Two" component={Two}/>),
  (<Route exact path="/Three" component={Three}/>),
  (<Route exact path="/Four" component={Four}/>)
  ]})

}

  render() {
    return (
          <div className="App">
              <div>
                <MyNav/>
                <ReactCSSTransitionGroup
                transitionName="PageSlider"
                transitionEnterTimeout={0}
                transitionLeaveTimeout={150}>
                      <Switch key={this.props.location.pathname}>
                           <Route exact path="/One" component={One}/>
                           <Route exact path="/Two" component={Two}/>
                           <Route exact path="/Three" component={Three}/>
                           <Route exact path="/Four" component={Four}/>
                      </Switch>
                </ReactCSSTransitionGroup>
              </div>     
          </div>  
    );
  }

componentWillReceiveProps(newProps) {
    this.setState({routeKey:newProps.location.pathname})
  }
    }

export default App;

相应地指定 .PageSlider-enter、.PageSlider-enter.PageSlider-enter-active、.PageSlider-leave、.PageSlider-leave.PageSlider-leave-active