Nextjs 13 ts 页面跳转动画 不使用第三方库实现执行页面跳转动画 1秒 后才执行跳转 const handleRouteChangeStart = = setIsAnimatingtrue; ; 这里设置 时长为 1秒 才执行下一步

的操作：

const handleRouteChangeComplete = (url: string) => {
  setTimeout(() => {
    router.push(url);
    setIsAnimating(false);
  }, 1000);
};

接下来，我们需要利用 CSS 实现页面跳转的动画效果。假设我们要实现的效果是当前页面向左滑动消失，下一个页面从右侧滑入。

首先，在全局 CSS 文件中定义两个类名，用于控制当前页面和下一个页面的动画效果：

.page-enter {
  transform: translateX(100%);
}
.page-enter-active {
  transform: translateX(0%);
  transition: transform 1s;
}
.page-exit {
  transform: translateX(0%);
}
.page-exit-active {
  transform: translateX(-100%);
  transition: transform 1s;
}

接下来，在我们的页面组件中使用 CSSTransition 组件包裹实际内容，并根据动画状态为组件添加相应的类名：

import { CSSTransition } from "react-transition-group";

const MyPage = () => {
  const [isAnimating, setIsAnimating] = useState(false);

  const handleRouteChangeStart = () => {
    setIsAnimating(true);
  };

  const handleRouteChangeComplete = (url: string) => {
    setTimeout(() => {
      router.push(url);
      setIsAnimating(false);
    }, 1000);
  };

  return (
    <div>
      <CSSTransition
        in={isAnimating}
        timeout={1000}
        classNames={{
          enter: "page-enter",
          enterActive: "page-enter-active",
          exit: "page-exit",
          exitActive: "page-exit-active",
        }}
        unmountOnExit
      >
        <div>当前页面的实际内容</div>
      </CSSTransition>
    </div>
  );
};

最后，在页面组件中监听路由变化事件，根据事件触发相应的动画和页面跳转：

useEffect(() => {
  router.events.on("routeChangeStart", handleRouteChangeStart);
  router.events.on("routeChangeComplete", handleRouteChangeComplete);
  return () => {
    router.events.off("routeChangeStart", handleRouteChangeStart);
    router.events.off("routeChangeComplete", handleRouteChangeComplete);
  };
}, [])