Nextjs 13 ts 页面跳转动画使用第1种方法如何设置CSS

在使用第一种方法进行页面跳转动画时，可以通过设置CSS来实现动画效果。具体步骤如下：

在你需要设置动画效果的组件中，使用CSS定义动画样式。例如，定义一个名为fade-in的动画：

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

在组件中使用上述定义的动画样式，并根据需要在页面跳转前或跳转后添加相应的class。例如，在进行页面跳转前添加fade-in类：

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

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

  useEffect(() => {
    setIsLoaded(true);
  }, []);

  const handleClick = () => {
    setIsLoaded(false);
    setTimeout(() => {
      router.push("/about");
    }, 500);
  };

  return (
    <div className={`page ${isLoaded ? "fade-in" : ""}`}>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About Page</button>
    </div>
  );
}

如果需要在页面跳转后也添加动画效果，可以使用Next.js提供的onRouteChangeStart和onRouteChangeComplete事件来实现。例如，在_app.js文件中监听事件并添加类：

import "../styles/globals.css";
import { useRouter } from "next/router";
import { useState } from "react";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const [isLoaded, setIsLoaded] = useState(true);

  router.events.on("routeChangeStart", () => {
    setIsLoaded(false);
  });

  router.events.on("routeChangeComplete", () => {
    setIsLoaded(true);
  });

  return (
    <div className={`page ${isLoaded ? "fade-in" : ""}`}>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

通过上述步骤，就可以使用CSS来实现Next.js 13 TypeScript页面跳转动画了