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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.