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

相关推荐
前端(从入门到入土)9 分钟前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗36 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少3 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端