umi实现路由动画

最新推荐文章于 2023-09-08 14:59:44 发布

与掉发不共戴天

最新推荐文章于 2023-09-08 14:59:44 发布

阅读量187

点赞数

文章标签： javascript react.js ecmascript

本文链接：https://blog.csdn.net/hyqhyqhyqq/article/details/129112903

版权

该文章展示了如何在React应用中结合umi库，利用react-transition-group的TransitionGroup和CSSTransition组件创建页面路由切换时的动画效果。代码示例包括设置不同路由动作（POP,PUSH,REPLACE）对应的CSS类，以及定义入场和离场的过渡样式。

摘要由CSDN通过智能技术生成

首先安装第三方包 react-transition-group

在src文件路径下创建layouts文件夹
在这里插入图片描述

index.tsx中代码

import React, { useState, useEffect } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { history as Router, withRouter } from 'umi'
import { Switch } from 'react-router'
import './index.less'

const routerType = {
   'POP': 'back',
   'PUSH': 'in',
   'REPLACE': 'in'
}

export default withRouter(({ location, children, history }) => {
   return (
      <TransitionGroup style={{ height: '100%' }} className='transition_wrapper' childFactory={(child) => (
         React.cloneElement(child, { classNames: routerType[history.action] })
      )}>
         <CSSTransition key={location.pathname} appear timeout={3000}>
            <Switch location={location}>{(children as any)?.props?.children}</Switch>
         </CSSTransition>
      </TransitionGroup>
   )
})

index.less中代码

.in-enter-active{  // 入场的过渡状态类
    transition: all 3s;
    transform: translate(0, 0)!important;
  }
   
  .in-enter-done { // 入场的动画的结束状态类
      // opacity: 0.5;
      transform: translate(0, 0) !important;
  }
   
  .in-enter {  // 入场的动画开始状态类
    z-index: 5 !important;
    transform: translate(100%, 0);
  }
   
  .in-exit-active {    // 离场动画
      opacity:0;
      transition: all 3s;
      transform: translate(-100%, 0)!important;
  }
   
  .in-exit {  // 离场动画开始
      // transform: translate(0, 0)!important;
  }
  .in-exit-done { // 离场动画结束
   
  }
   
  // 返回动画
  .back-enter-active{  // 入场的过渡状态类
      transition: all 3s;
      transform: translate(0, 0)!important;
    
    }
  .back-enter-done { // 入场的动画的结束状态类
      // opacity: 0.5;
      transform: translate(0, 0) !important;
  }
   
  .back-enter {  // 入场的动画开始状态类
      z-index: 5 !important;
      transform: translate(-100%, 0);
  }
    
  .back-exit-active {    // 离场动画
      opacity:0;
      transition: all 3s;
      transform: translate(100%, 0)!important;
  }
   
  .back-exit {  // 离场动画开始
      // transform: translate(0, 0)!important;
  }
  .back-exit-done { // 离场动画结束
   
  }