Next.js 使用 motion.div 实现页面切换动画效果

要在页面切换时实现旧界面从下划出和新页面从下划入的效果，你可以使用motion.div和useAnimation来实现。

首先，安装framer-motion库：

npm install framer-motion

然后，在你的Next.js页面中导入所需的模块：

import { motion, useAnimation } from 'framer-motion';

接下来，定义旧界面从下划出和新页面从下划入的动画效果。你可以创建两个自定义的动画变体，一个用于旧界面的退出动画，另一个用于新页面的进入动画。例如：

const exitAnimation = {
  initial: { y: 0 },
  animate: { y: '100%' },
  transition: { duration: 0.5 }
};

const enterAnimation = {
  initial: { y: '100%' },
  animate: { y: 0 },
  transition: { duration: 0.5 }
};

然后，使用motion.div包裹你的页面内容，并根据页面切换状态使用不同的动画变体。你可以使用useAnimation钩子来控制动画的播放。

const YourComponent = () => {
  const controls = useAnimation();

  const handlePageTransition = async () => {
    // 触发旧界面的退出动画
    await controls.start(exitAnimation);

    // 执行页面切换逻辑

    // 触发新页面的进入动画
    await controls.start(enterAnimation);
  };

  return (
    <motion.div
      initial='initial'
      animate='animate'
      transition='transition'
      variants={exitAnimation}
      onAnimationComplete={handlePageTransition}
    >
      {/* 页面内容 */}
    </motion.div>
  );
};

在handlePageTransition函数中，你可以执行页面切换的逻辑。一旦旧界面的退出动画完成，onAnimationComplete事件将被触发，然后你可以执行切换页面的逻辑，并开始新页面的进入动画。

请注意，这只是一个基础示例，你可能需要根据你的实际需求进行调整和扩展。