Nextjs 13 ts 页面跳转动画

在 Next.js 13 中，你可以使用 next/router 提供的 useRouter hook 来监听路由变化，然后结合 CSS 动画实现页面跳转动画。

以下是一个简单的例子：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import styles from './PageTransition.module.css';

const PageTransition: React.FC = ({ children }) => {
  const router = useRouter();
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    const handleStart = () => setIsAnimating(true);
    const handleComplete = () => setIsAnimating(false);

    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
      router.events.off('routeChangeError', handleComplete);
    };
  }, [router]);

  return (
    <div className={isAnimating ? styles.animating : ''}>
      {children}
    </div>
  );
};

export default PageTransition;

在这个组件中，我们使用 useRouter hook 监听路由变化，当路由变化时，我们会将 isAnimating 置为 true，然后通过 CSS 动画实现页面跳转效果。在动画结束后，我们将 isAnimating 置为 false。

你需要自己通过 CSS 实现跳转动画，例如：

.animating {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

在你的页面组件中，你可以使用 PageTransition 组件包裹你的内容，例如：

import PageTransition from '@/components/PageTransition';

const MyPage: React.FC = () => {
  return (
    <PageTransition>
      <div>My Page</div>
    </PageTransition>
  );
};

export default MyPage;
``