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

// 页面切换过渡动画
.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%);}
}

 
import { CSSTransition, TransitionGroup } from 'react-transition-group';
<TransitionGroup><CSSTransitionkey={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 包住路由然后给样式 就可以达到页面跳转的时候样式动画