Next.js 13 TypeScript 页面跳转动画：无第三方库实现

本文将介绍如何在 Next.js 13 TypeScript 项目中使用 useEffect 和 router.events 实现页面跳转动画，无需依赖任何第三方库。

示例代码：

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

const MyComponent = () => {
  const [isAnimating, setIsAnimating] = useState(false);
  const router = useRouter();

  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]);

  // 设置动画执行持续时间
  const handleRouteChangeStart = () => {
    setIsAnimating(true);
    setTimeout(() => {
      setIsAnimating(false);
    }, 1000); // 1000 毫秒为动画持续时间
  };

  const handleRouteChangeComplete = () => {
    setIsAnimating(false);
    setTimeout(() => {
      setIsAnimating(true);
    }, 1000); // 1000 毫秒为动画持续时间
  };

  return (
    <div>
      {/* 根据 isAnimating 状态控制动画效果 */}
    </div>
  );
};

 export default MyComponent;

代码解析：

使用 useEffect 监听路由事件 routeChangeStart 和 routeChangeComplete。
在 handleRouteChangeStart 和 handleRouteChangeComplete 函数中使用 setTimeout 设置动画持续时间。
在代码中，动画持续时间为 1000 毫秒，您可以根据实际需要进行调整。

注意：

该方法仅适用于简单的页面跳转动画效果。
您需要根据实际项目需求自定义动画效果。

希望本文能帮助您实现 Next.js 13 TypeScript 项目中无第三方库的页面跳转动画。