React路由动画切换实现过程详解

目录

1.下载

cnpm>

2.配置

在路由配置文件/src/App.js文件下中导入动画组件

引入

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

在路由组件模板中，用动画组件包裹路由组件

<TransitionGroup>
                <CSSTransition timeout={3000} classNames="dg" unmountOnExit key={props.location.pathname}>
                    <Switch location={props.location}>
                        <Route path="/" exact component={Login}/>
                        <Route path="/child1" exact component={Home}/>
                        <Route path="/child2" exact component={My}/>
                    </Switch>
                </CSSTransition>
</TransitionGroup>

使用动画的写法 CSSTransition 需要设置三个属性：

in: 控制子元素显示隐藏的条件，一般是bool值或表达式timeout: 入场或出场动画的时间，单位默认毫秒className： 入场或出场class属性名前缀

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

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

如果路由中没有location.pathname，需要使用withRouter导入

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

3.引入css

在组件中写出路由切换动画的过程

/* 入场动画过程 */
.dg-enter{
    transform: translateX(200px)
  }
  .dg-enter-active{
    transition: 2s;
    transform: translateX(0px)
  }
  .dg-enter-done{
    transform: translateX(0px)
  }
  /* 出场动画过程 */
  .dg-exit{
    transform: translateX(0px)
  }
  .dg-exit-active{
    transition: 2s;
    transform: translateX(200px)
  }
  .dg-exit-done{
    transform: translateX(200px)
  }

引入css文件

import './app.css'

这样一个简单的React路由动画切换就实现了

4.结合animate库

我们可以自己定义classNames，然后使用css3设置动画，也可以结合animate库设置他的动画效果

下载

npm>

引入

import 'animate.css';

//自定义的类名（定义动画效果，进场前，进场后直到结束，结束前，结束后）
classNames={{
    enter: "animate__animated",
    enterActive: "animate__fadeIn",
    exit: "animate__animated",
    exitActive: "animate__fadeOut",
}}

具体的我们可以进行参考animate官网网址：Animate.css | A cross-browser library of CSS animations.

到此这篇关于React路由动画切换实现过程详解的文章就介绍到这了,更多相关React路由动画切换内容请搜索易采站长站以前的文章或继续浏览下面的相关文章希望大家以后多多支持易采站长站！