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

Mr_wuying2024-09-04 12:17

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