在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 包住路由然后给样式 就可以达到页面跳转的时候样式动画

相关推荐
yinke小琪8 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿12 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux14 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵15 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆18 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
Thomas游戏开发18 分钟前
Unity3D Boehm GC原理解析
前端框架·unity3d·游戏开发
豆苗学前端21 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_21 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪23 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany25 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc