Next.js 13 TS 页面跳转动画实现：无第三方库，自定义动画效果

本文将介绍如何在 Next.js 13 中使用 TypeScript 实现自定义页面跳转动画，无需借助第三方库。我们将通过监听路由事件和 CSS 动画来实现流畅的页面切换效果。

1. 延迟页面跳转

首先，我们需要在页面跳转之前延迟 1 秒，以便让动画有机会执行。

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

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

  const handleRouteChangeStart = () => {
    setIsAnimating(true);
  };

  const handleRouteChangeComplete = (url: string) => {
    setTimeout(() => {
      router.push(url);
      setIsAnimating(false);
    }, 1000);
  };

  // ...
};

在这个代码片段中，我们定义了 handleRouteChangeStart 和 handleRouteChangeComplete 两个函数，分别在路由开始变化和完成时触发。在 handleRouteChangeComplete 函数中，我们使用 setTimeout 延迟 1 秒后才执行 router.push，以便让动画有机会完成。

2. 定义 CSS 动画

接下来，我们需要利用 CSS 实现页面跳转的动画效果。假设我们要实现的效果是当前页面向左滑动消失，下一个页面从右侧滑入。

首先，在全局 CSS 文件中定义两个类名，用于控制当前页面和下一个页面的动画效果：

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

.page-enter-active {
  transform: translateX(0%);
  transition: transform 1s;
}

.page-exit {
  transform: translateX(0%);
}

.page-exit-active {
  transform: translateX(-100%);
  transition: transform 1s;
}

3. 使用 CSSTransition 组件

现在，我们需要使用 CSSTransition 组件来包裹我们的页面内容，并根据动画状态为组件添加相应的类名：

import { CSSTransition } from 'react-transition-group';

// ...

return (
  <div>
    <CSSTransition
      in={isAnimating}
      timeout={1000}
      classNames={{
        enter: 'page-enter',
        enterActive: 'page-enter-active',
        exit: 'page-exit',
        exitActive: 'page-exit-active',
      }}
      unmountOnExit
    >
      <div>当前页面的实际内容</div>
    </CSSTransition>
  </div>
);

CSSTransition 组件接收 in 属性，用于控制动画的开启和关闭。timeout 属性用于设置动画时长，classNames 属性用于指定动画类名。unmountOnExit 属性用于在动画结束后移除组件，可以提升性能。

4. 监听路由事件

最后，我们需要在页面组件中监听路由变化事件，根据事件触发相应的动画和页面跳转：

useEffect(() => {
  router.events.on('routeChangeStart', handleRouteChangeStart);
  router.events.on('routeChangeComplete', handleRouteChangeComplete);
  return () => {
    router.events.off('routeChangeStart', handleRouteChangeStart);
    router.events.off('routeChangeComplete', handleRouteChangeComplete);
  };
}, []);

在 useEffect 钩子函数中，我们监听了 routeChangeStart 和 routeChangeComplete 事件，并在组件卸载时移除监听器。

总结

通过以上步骤，我们就成功地在 Next.js 13 中实现了自定义页面跳转动画，并且无需借助第三方库。你还可以根据自己的需求，调整动画效果和时长，以及 CSS 类名。

希望这篇文章能帮助你更好地理解 Next.js 中的路由事件和动画实现机制。