umi实现路由动画

XXXX_康康吖

已于 2023-03-14 14:12:15 修改

阅读量198

点赞数

文章标签： javascript 前端 react.js

于 2023-03-13 14:06:50 首次发布

本文链接：https://blog.csdn.net/m0_68009075/article/details/129492570

版权

文章介绍了如何在Umi框架中添加路由动画，包括安装react-transition-group库，创建layout文件夹，编写index.tsx和index.less文件来定义动画效果，然后在pages文件夹创建页面，并在umirc.ts配置。最后通过npmstart启动项目，展示路由切换时的动画效果。

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

umi路由动画

一、安装react-transition-group

npm i react-transition-group

二、在src目录下创建layout文件夹，与pages同级

在这里插入图片描述

三、layout文件夹中创建index.tsx

在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-dom'
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文件中复制如下代码

.dg-enter {
	transform: translate(100%, 0);
}

.dg-enter-active {
	transition: 3s;
	transform: translate(0);
}

.dg-enter-done {
	transform: translate(0);
}

.dg-exit-active {
	transition: 1s;
	transform: translate(-100%, 0);
}

.back-enter-active {
	transition: all 3s;
	transform: translate(0, 0) !important;
}

.back-enter-done {
	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;
}