在react中要将页面跳转有动画

css 复制代码
// 页面切换过渡动画
.page {
  position: absolute;
  left: 15px;
  right: 15px;
}

// 页面切换过渡动画 --- 进入
.page-enter {
  opacity: 0;
  transform: translateY(100%);
}

// 页面切换过渡动画 --- 进入(被激活)
.page-enter-active {
  opacity: 1;
  // transform: scale(1);
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

// 页面切换过渡动画 --- 离开
.page-exit {
  opacity: 1;
  transform: translateY(0%);
}

// 页面切换过渡动画 --- 离开(被激活)
.page-exit-active {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 300ms, transform 300ms;
}

.tabsAnimation {
  position: absolute;
  animation: tabsIn .5s ease-in-out;
}

@keyframes tabsIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }
}
javascript 复制代码
 
import { CSSTransition, TransitionGroup } from 'react-transition-group';
<TransitionGroup>
              <CSSTransition
                key={window.location.pathname}
                timeout={300}
                classNames="page"
                unmountOnExit
              >
              <Routes >
                <Route path='' element={<Information />}></Route>
                <Route path='/Index' element={<Information />}></Route>
                <Route path='/Index/AerationControl' element={<AerationControl />}></Route>
                <Route path='/Index/AlarmManagement' element={<AlarmManagement/>}></Route>
                <Route path='/Index/SystemManagement' element={<SystemManagement/>}></Route>
              </Routes>
            </CSSTransition>
            </TransitionGroup>

npm install react-transition-group --save

react-transition-group 包住路由然后给样式 就可以达到页面跳转的时候样式动画

相关推荐
slim~12 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼16 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己28 分钟前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
乖女子@@@42 分钟前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦4 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3