nextjs 使用 motiondiv 如何在页面切换的时候实现旧界面从下划出和新页面从下划入效果

要在页面切换时实现旧界面从下划出和新页面从下划入的效果，你可以使用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事件将被触发，然后你可以执行切换页面的逻辑，并开始新页面的进入动画。

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