react实现动画效果

一、安装react-transition-group

react-transition-group动画组件表现很好，可以满足日常动画开发需求，而且是React官方提供的动画过渡库，有完整的API文档。

点击查看官方文档

安装命令

npm install react-transition-group --save

# 引入动画
import { TransitionGroup } from 'react-transition-group'

二、使用CSSTransition

#进行引用
import {CSSTransition} from 'react-transition-group'

< CSSTransition > 标签的属性：

in：in值的变化决定了动画是enter还是exit，in值的变化是触发动画的扳机。

timeout：动画持续时间（ms）

classNames：css类名

<div className="App">
      <TransitionGroup>
        <CSSTransition timeout={2000} classNames="dg" unmountOnExit key={props.location.pathname}>
          # 路由
          <Switch location={props.location}>
            <Route exact path='/' component={Login}></Route>
            <Route path='/home' component={Home}></Route>
            {/* <AuthRoute exact path='/home' component={Home} /> */}
            {/* <AuthRoute component={Home} /> */}
            <Route exact path='/lianxi' component={Lianxi}></Route>
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    </div>

css代码

/* 动画效果 */

/* 入场动画过程 */
.dg-enter{
    /* 位于页面的右侧 */
    transform: translate(100%) scale(0.4) rotate(0deg);
    /* transform: rotate(0deg) */

  }
  .dg-enter-active{
    transition: 2s;
    transform: translate(0) rotate(0deg)
  }
  .dg-enter-done{
    transform: translate(0) rotate(0deg);
    /* transform: translateX(360deg) */
  }


  /* 出场动画过程 */
  .dg-exit{
    transform: translate(0)
  }
  .dg-exit-active{
    transition: 2s;
    transform: translate(-100%)
  }
  .dg-exit-done{
    transform: translate(-100%)
  }

需要用withRouter进行包裹

// 引入withRouter
import { withRouter } from 'react-router-dom'

# 进行withRouter暴露抛出
export default withRouter(App)