react路由跳转动画效果

1.先下载插件

npm i react-transition-group 

2.在 路由配置文件中引入插件

import React from 'react'

import { Tabbar } from 'react-vant'

import { Outlet, useNavigate, useLocation } from 'react-router-dom'

import { WapHomeO, FriendsO } from '@react-vant/icons'

import './index.css'

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

export default function Index() {

  const navigate = useNavigate()

  const changeTab = (path) => {

    navigate(path)

  }

  return (

    <div className='box1'>

      <TransitionGroup className='transition_wrapper' style={{ width: "100%", height: "100%",overflowX:'hidden',overflowY:'scroll' }}>

        <CSSTransition key={useLocation().pathname} unmountOnExit timeout={2000} classNames='animate'>

          <div>

            <Outlet></Outlet>

          </div>

        </CSSTransition>

      </TransitionGroup>

      <div className="box2">

        <Tabbar onChange={changeTab} activeColor='#f44336' inactiveColor='#000'>

          <Tabbar.Item icon={<WapHomeO />} name={'/home'}>首页</Tabbar.Item>

          <Tabbar.Item icon={<FriendsO />} name={'/my'}>个人</Tabbar.Item>

        </Tabbar>

      </div>

    </div>

  )

}

3.引入相应的css文件样式

这里是平铺缩放的效果

/* 入场动画过程 */

.animate-enter {

  opacity: 0;

  transform: scale(0.5);

}

.animate-enter-active {

  transition: 0.5s;

  opacity: 1;

  transform: scale(1);

}

.animate-enter-done {

  opacity: 1;

  transform: scale(1);

}

/* 出场动画过程 */

.animate-exit {

  opacity: 1;

  transform: scale(1);

}

.animate-exit-active {

  transition: 0.5s;

  opacity: 0;

  transform: scale(0.5);

}

.animate-exit-done {

  opacity: 0;

  transform: scale(0.5);

}