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

要在 Next.js 中使用 motion.div 实现页面切换时的下划出和下划入效果，你可以使用 Framer Motion 库来实现动画效果。下面是一个简单的示例：

首先，安装 Framer Motion 库：

npm install framer-motion

然后，在你的页面组件中使用 motion.div 来包裹需要进行动画的元素。例如，你可以在页面切换时，将旧页面从下方滑出，新页面从下方滑入：

import { motion } from 'framer-motion';
import { useRouter } from 'next/router';

const variants = {
  enter: {
    y: '100%',
    opacity: 0,
  },
  center: {
    y: 0,
    opacity: 1,
  },
  exit: {
    y: '-100%',
    opacity: 0,
  },
};

const MyPage = () => {
  const router = useRouter();

  return (
    <motion.div
      initial="enter"
      animate="center"
      exit="exit"
      variants={variants}
      transition={{ duration: 0.5 }}
    >
      {/* 页面内容 */}
      <h1>我的页面</h1>
      {/* ... */}
    </motion.div>
  );
};

export default MyPage;

在上面的代码中，我们定义了三个动画状态：enter（新页面进入前的初始状态）、center（新页面进入后的最终状态）和 exit（旧页面离开后的状态）。

然后，我们将这些动画状态应用到 motion.div 组件上，通过 initial、animate 和 exit 属性来指定动画状态的切换时机。

最后，我们将动画效果的变化通过 variants 属性进行配置，并使用 transition 属性指定动画的过渡效果。

这样，当你切换页面时，就会实现旧页面从下方滑出，新页面从下方滑入的动画效果。记得在 Next.js 中启用 SSR（服务器端渲染）以确保动画效果的正确运行。