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

首先在 Next.js 13 中创建一个 TypeScript 页面，例如 pages/index.tsx。
在页面组件中添加一个状态 isAnimating，初始值为 false。

import { useState } from 'react';

export default function Home() {
  const [isAnimating, setIsAnimating] = useState(false);

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
}

添加页面跳转逻辑，例如点击一个链接时，设置 isAnimating 为 true 并使用 setTimeout 在 1 秒钟后将路由跳转到目标页面。

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function Home() {
  const [isAnimating, setIsAnimating] = useState(false);
  const router = useRouter();

  const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault();
    setIsAnimating(true);
    setTimeout(() => {
      router.push('/about');
    }, 1000);
  };

  return (
    <div>
      {/* 页面内容 */}
      <Link href='/about'>
        <a onClick={handleLinkClick}>Go to about page</a>
      </Link>
    </div>
  );
}

在页面组件中添加 CSS 动画，根据 isAnimating 状态控制动画的播放。

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

export default function Home() {
  const [isAnimating, setIsAnimating] = useState(false);
  const router = useRouter();

  const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault();
    setIsAnimating(true);
    setTimeout(() => {
      router.push('/about');
    }, 1000);
  };

  useEffect(() => {
    if (isAnimating) {
      const timeoutId = setTimeout(() => {
        setIsAnimating(false);
      }, 1000);
      return () => clearTimeout(timeoutId);
    }
  }, [isAnimating]);

  return (
    <div className={`page ${isAnimating ? 'animating' : ''}`}>
      {/* 页面内容 */}
      <Link href='/about'>
        <a onClick={handleLinkClick}>Go to about page</a>
      </Link>
    </div>
  );
}

在 CSS 样式表中定义页面动画，例如将页面向左移动 100%。

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 1s;
}

.page.animating {
  transform: translateX(-100%);
}

这样，在 Next.js 13 TypeScript 页面中就可以使用 isAnimating 状态和 CSS 动画实现页面跳转动画，不需要使用第三方库。