umi 路由切换动画的实现

白日梦想家.、

已于 2023-02-16 19:57:17 修改

阅读量388

点赞数

文章标签： javascript react.js 前端

于 2023-02-16 19:42:05 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65545080/article/details/129068438

版权

本文介绍了如何使用UmiJS搭建项目，包括确认Node.js版本、安装Yarn、创建Umi应用，然后安装react-transition-group插件以实现页面切换时的过渡动画。在src目录下创建layouts文件夹并编写相应的less和tsx代码来定义和应用动画效果。最后，在pages文件夹中创建并配置页面，通过umi的history对象实现页面间的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.准备工作

node -v查看版本（必须在10以上）
检查是否有yarn（没有的话，用npm i yarn -g进行全局安装）

2.实现

2.1 搭建umi脚手架

创建一个文件夹，cmd进入黑窗口，输入：

yarn create @umijs/umi-app

2.2 补全缺失的信息

在cmd黑窗口输入yarn进行补全

2.3 利用编译工具打开文件夹

2.4 点击ctrl+`打开终端，安装react-transition-group插件

npm i react-transition-group

2.5 在src目录下创建layouts文件夹，并在文件夹下创建两个文件

在这里插入图片描述

2.6 在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 { // 离场动画结束
 
}

2.7 在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>
)
})

2.8 在pages文件中创建自己需要的页面,页面中需要体现路由跳转

在这里插入图片描述

页面1：home.jsx

import React from 'react'
import { history } from 'umi'
import './index.less'
 
export default function Home() {
  return (
    <div className='home'>
        home页面
        <button onClick={()=>{history.push('/')}}>跳转到index页面</button>
    </div>
  )
}

页面2：index.tsx

import './index.less'
import { history } from 'umi';
 
export default function Index() {
  
  return (
    <div className='index'>
      index
      <button onClick={()=>{history.push('/home')}}>跳转到home页面</button>
    </div>
  );
}

样式：index.less

.index,#root,.home{
    height: 100%;
}
.index{
    background-color: pink;
}
.home{
    background-color: antiquewhite;
}

2.9 将umirc.ts文件中的配置路由注释掉

在这里插入图片描述

2.10 运行项目

yarn start/npm start

3.完成效果

切换