Nextjs 13 ts 页面跳转动画 不使用第三方库实现执行页面跳转动画 1秒 后才执行跳转

要实现页面跳转动画并延迟跳转，可以使用Next.js提供的Router对象中的events属性来监听页面跳转事件，并在事件触发时执行动画效果。具体实现步骤如下：

1. 在_app.js中导入Router对象和useEffect钩子函数：

import { Router } from "next/router";
import { useEffect } from "react";

2. 使用useEffect钩子函数来监听Router对象中的events属性：

useEffect(() => {
  const handleRouteChangeStart = (url) => {
    // 在页面跳转前执行动画效果
    // ...
    setTimeout(() => {
      // 延迟1秒后执行页面跳转
      Router.push(url);
    }, 1000);
  };

  Router.events.on("routeChangeStart", handleRouteChangeStart);

  return () => {
    Router.events.off("routeChangeStart", handleRouteChangeStart);
  };
}, []);

在useEffect函数中，使用Router.events.on方法来监听routeChangeStart事件，当页面跳转开始时执行回调函数handleRouteChangeStart。在handleRouteChangeStart函数中，可以执行页面跳转前的动画效果，然后使用setTimeout函数来延迟1秒后执行页面跳转，使用Router.push方法来跳转到指定页面。

3. 在handleRouteChangeStart函数中执行页面跳转前的动画效果，例如使用CSS动画来实现：

const handleRouteChangeStart = (url) => {
  // 获取页面跳转前的元素
  const pageTransitionElement = document.querySelector(".page-transition");
  // 添加动画效果类名
  pageTransitionElement.classList.add("page-transition--active");

  setTimeout(() => {
    Router.push(url);
  }, 1000);
};

在handleRouteChangeStart函数中，可以通过document.querySelector方法来获取页面跳转前的元素，例如可以为页面添加一个类名为page-transition的元素，然后在执行页面跳转前为该元素添加一个类名为page-transition--active的动画效果类名，例如：

.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.page-transition--active {
  opacity: 0;
}

这样，在执行页面跳转时，页面会先执行动画效果，然后延迟1秒后再执行页面跳转