react的路由切换动画

1. 在react项目中下载安装过渡动画模块

cnpm install react-transition-group --save

2. 在路由配置文件/src/router/index.js中导入动画组件

import { TransitionGroup, CSSTransition } from 'react-transition-group'

 3. 在路由组件模板中,用动画组件包裹路由组件 

<TransitionGroup>
     <CSSTransition timeout={2000} classNames={this.state.dg} unmountOnExit 
                key={this.props.location.pathname}>
          <Switch location={this.props.location}>
                <Route path='/' exact component={Login}></Route>
                <Route path='/book' component={Book}></Route>
                <Route path='/mybook' component={Mybook}></Route>
                <Redirect to='/'></Redirect>
           </Switch>
      </CSSTransition>
</TransitionGroup>

注意：CSSTransition组件的key属性值要保证唯一性，所以用location.pathname

Switch组件要设置location属性为路由信息的props.location，保证路由跳转组件的key和CSSTransition的key一致

 

4.在加左右动画判断的时候需要去指定左右状态的变化

constructor() {
    super()
    this.state = {
      df: "dgLeft"  //定义一个CSSTransition的className变量以便于我们进行左右动画的转变
    }
  }
  shouldComponentUpdate(nextProps){
    let to = nextProps.location.pathname
    let from = this.props.location.pathname
    if(to == from){
      return false
    }else{
      return true
    }
  }
  componentWillReceiveProps(nextProps) {
    let to = nextProps.location.pathname
    let from = this.props.location.pathname
    // console.log(to,from);
    if(to == "/book" && from =="/mybook" || to == "/" && from =="/book"){
      // 加右动画
      this.state.dg = "dgRight"
    }else{
      // 加左动画
      this.state.dg = "dgLeft"
    }
  }

 

5.在组件的css文件中写路由切换动画过程 

/* 入场动画过程 */
.dgLeft-enter {
  transform: translateX(100%) rotate(0) scale(0)
}

.dgLeft-enter-active {
  transition: all 2s;
  transform: translateX(0)
}

.dgLeft-enter-done {
  transform: translateX(0)
}

/* 出场动画过程 */
.dgLeft-exit {
  opacity: 1;
  transform: translateX(0px)
}

.dgLeft-exit-active {
  opacity: 0;
  transition: 2s;
  transform: translateX(100%)
}

.dgLeft-exit-done {
  opacity: 0;
  transform: translateX(100%)
}

/* 右动画入场 */
.dgRight-enter {
  transform: translateX(-100%) rotate(0) scale(0)
}

.dgRight-enter-active {
  transition: all 2s;
  transform: translateX(0)
}

.dgRight-enter-done {
  transform: translateX(0)
}

/* 右动画出场动画过程 */
.dgRight-exit {
  opacity: 1;
  /* transform: translateX(0px) */
}

.dgRight-exit-active {
  opacity: 0;
  transition: 2s;
  /* transform: translateX(100%) */
}

.dgRight-exit-done {
  opacity: 0;
  /* transform: translateX(100%) */
}

6. 路由组件中没有路由信息location.pathname, 需要使用withRouter导入

import { withRouter } from 'react-router-dom'
export default withRouter(MyRouter)