nextjs app router使用 framer motion 如何在站内跳转的时候实现旧界面从下划出和新页面从下划入效果

要在 Next.js 应用程序中使用 Framer Motion 实现旧页面从下方滑出和新页面从下方滑入的效果，您可以按照以下步骤操作：

1. 首先，确保您的 Next.js 应用程序已经安装了 framer-motion 包。您可以使用以下命令安装它：

npm install framer-motion

2. 在您的 Next.js 页面组件中，导入 framer-motion 的 motion 组件：

import { motion } from 'framer-motion';

3. 创建一个容器组件，用于包裹您的页面内容，并应用动画效果。您可以使用 AnimatePresence 组件来处理页面切换的动画效果：

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

const PageTransition = ({ children }) => {
  return (
    <AnimatePresence exitBeforeEnter>
      <motion.div
        initial={{ opacity: 0, y: 100 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -100 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
};

4. 在您的页面组件中，将内容包裹在 PageTransition 组件中，以便应用页面切换的动画效果：

import PageTransition from 'path/to/PageTransition';

const MyPage = () => {
  return (
    <PageTransition>
      {/* 页面内容 */}
    </PageTransition>
  );
};

现在，当您在 Next.js 应用程序中进行页面切换时，旧页面将从下方滑出，同时新页面将从下方滑入。

请注意，上述示例只是一种实现方式，您可以根据自己的需求调整动画效果和参数。Framer Motion 的官方文档提供了更多关于动画的细节和选项，您可以参考该文档以获得更多帮助：https://www.framer.com/api/motion/