Next.js 页面切换滑出滑入效果实现教程

要在Next.js中实现切换页面时的滑出滑进效果，你可以使用CSS动画和React的路由过渡效果。

首先，在你的Next.js项目中安装React Router库：

npm install react-router-dom

然后，你可以创建一个Layout组件，用来包装整个应用程序，并在其中添加页面过渡效果的CSS样式。以下是一个示例：

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { CSSTransition } from 'react-transition-group';
import 'your-transition-styles.css';

const Layout = ({ children }) => {
  const [isPageLoading, setIsPageLoading] = useState(false);
  const router = useRouter();

  useEffect(() => {
    const handleStart = () => {
      setIsPageLoading(true);
    };

    const handleComplete = () => {
      setIsPageLoading(false);
    };

    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
      router.events.off('routeChangeError', handleComplete);
    };
  }, []);

  return (
    <div>
      <CSSTransition
        in={isPageLoading}
        timeout={300}
        classNames='page-transition'
        unmountOnExit
      >
        <div className='page-transition-overlay'></div>
      </CSSTransition>
      {children}
    </div>
  );
};

export default Layout;

在上面的代码中，我们使用了CSSTransition组件来显示或隐藏页面过渡效果。isPageLoading状态用于控制过渡效果的显示与隐藏。我们通过监听路由的变化来更新isPageLoading状态，并在页面切换开始和结束时设置相应的值。

你还需要在_app.js文件中使用Layout组件包装你的页面组件：

import Layout from 'path/to/Layout';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

最后，你可以创建一个your-transition-styles.css文件来定义页面过渡效果的CSS样式。以下是一个示例：

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

.page-transition-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: transform 300ms, opacity 300ms;
}

.page-transition-exit {
  transform: translateX(0);
  opacity: 1;
}

.page-transition-exit-active {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 300ms, opacity 300ms;
}

.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white; /* 背景颜色根据你的需求进行修改 */
  z-index: 9999;
}

在上面的代码中，我们定义了页面进入和退出的动画效果，通过translateX属性控制页面的滑动方向，通过opacity属性控制页面的透明度变化。

现在，当你切换页面时，你应该能看到页面的滑出滑进效果了。你可以根据自己的需求修改CSS样式来实现不同的过渡效果。