Next.js 13 使用 TS 实现页面跳转动画 (无第三方库)

Next.js 13 使用 TypeScript 实现页面跳转动画 (无第三方库)

本文介绍如何在 Next.js 13 中使用 TypeScript 实现页面跳转动画效果，无需使用第三方库。通过监听路由事件，并在事件触发时添加动画效果，并在 1 秒后执行跳转。

实现步骤

导入 Router 对象和 useEffect 钩子函数:

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

使用 useEffect 监听 Router 对象的 events 属性:

useEffect(() => {
  const handleRouteChangeStart = (url) => {
    // 在页面跳转前执行动画效果
    // ...
    setTimeout(() => {
      // 延迟 1 秒后执行页面跳转
      Router.push(url);
    }, 1000);
  };

  Router.events.on('routeChangeStart', handleRouteChangeStart);

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

在 useEffect 函数中，使用 Router.events.on 方法监听 routeChangeStart 事件。当页面跳转开始时，会执行回调函数 handleRouteChangeStart。在 handleRouteChangeStart 函数中，可以执行页面跳转前的动画效果，然后使用 setTimeout 函数延迟 1 秒后执行页面跳转，使用 Router.push 方法跳转到指定页面。

在 handleRouteChangeStart 函数中执行动画效果:

const handleRouteChangeStart = (url) => {
  // 获取页面跳转前的元素
  const pageTransitionElement = document.querySelector('.page-transition');
  // 添加动画效果类名
  pageTransitionElement.classList.add('page-transition--active');

  setTimeout(() => {
    Router.push(url);
  }, 1000);
};

在 handleRouteChangeStart 函数中，可以通过 document.querySelector 方法获取页面跳转前的元素。例如，可以为页面添加一个类名为 page-transition 的元素，并在执行页面跳转前为该元素添加一个类名为 page-transition--active 的动画效果类名。

添加 CSS 动画效果:

.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.page-transition--active {
  opacity: 0;
}

这样，在执行页面跳转时，页面会先执行动画效果，然后延迟 1 秒后再执行页面跳转。

注意:

上述代码需要在 Next.js 应用的 _app.js 文件中进行配置。
可以根据实际需求调整动画效果和延迟时间。
可以使用其他动画库，例如 react-transition-group 或 framer-motion，来实现更复杂的动画效果。