【umi 路由切换动画的实现】

效果展示:

路由动画效果展示

准备工作:

node -v查看版本(必须在10以上)

检查是否有yarn(没有的话,用npm i yarn -g进行全局安装)

实现步骤:

1.搭建umi脚手架

创建一个文件夹,cmd进入黑窗口,输入:

yarn create @umijs/umi-app

2.补全缺失的信息

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

3.利用编译工具打开文件夹

4.点击ctrl+`打开终端,安装react-transition-group插件

npm i react-transition-group

5.在src目录下创建layouts文件夹,并在文件夹下创建两个文件

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

}

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

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>
  );
}

注意:需要将页面的css样式设为position:absolate

样式:index.less

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

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

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  
  // routes: [
  //   { path: '/', component: '@/pages/index' },
  // ],

  fastRefresh: {},
});

10.运行项目

yarn start

11.完成

总结:

以上就是umi路由动画的实现了,希望对刚刚接触umi框架的你有所帮助

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值