Nextjs 13 ts 页面跳转动画 不使用第三方库实现

要实现页面跳转动画，我们可以使用 Next.js 提供的 router.events 监听路由变化事件，然后在路由发生变化时执行动画效果。

首先，在 _app.tsx 文件中导入 router 和 useEffect：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

然后，在 useEffect 中监听路由变化事件，执行动画效果：

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChangeStart = () => {
      // 执行页面跳转动画
    };

    const handleRouteChangeComplete = () => {
      // 结束页面跳转动画
    };

    router.events.on('routeChangeStart', handleRouteChangeStart);
    router.events.on('routeChangeComplete', handleRouteChangeComplete);

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

  return <Component {...pageProps} />;
}

export default MyApp;

接下来，我们可以根据需求自定义页面跳转动画。以下是一个简单的例子：

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const [isAnimating, setIsAnimating] = useState(false);

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

    const handleRouteChangeComplete = () => {
      setIsAnimating(false);
    };

    router.events.on('routeChangeStart', handleRouteChangeStart);
    router.events.on('routeChangeComplete', handleRouteChangeComplete);

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

  return (
    <>
      <div className={`page ${isAnimating ? 'animating' : ''}`}>
        <Component {...pageProps} />
      </div>
      <style jsx>{`
        .page {
          opacity: 1;
          transition: opacity 0.3s ease-in-out;
        }

        .page.animating {
          opacity: 0;
        }
      `}</style>
    </>
  );
}

export default MyApp;

在这个例子中，我们使用 useState 来保存页面跳转动画的状态，然后在 useEffect 中根据路由变化事件更新状态。在页面组件的外层包裹一个 div，使用 CSS transition 实现页面跳转动画效果。在 div 上添加 animating 类名来触发动画效果。

当然，这只是一个简单的例子，你可以根据需求使用其他动画库或自定义动画效果来实现页面跳转动画