使用 Framer Motion 在 React.js 中进行页面转换

Framer Motion 是一个用于 React.js 应用程序的动画库。它提供了许多预先构建的动画组件，可以轻松地实现复杂的页面过渡效果和元素动画。本文将介绍如何使用 Framer Motion 实现页面转换。

安装 Framer Motion

在开始使用之前，我们要先安装 Framer Motion。在终端中运行以下命令：

npm install framer-motion

在 React.js 中使用 Framer Motion

使用 Framer Motion 创建动画只需要将组件包裹在 <motion> 组件中即可。例如，要将一个 div 元素淡入效果，可以这样写：

import { motion } from "framer-motion";

const FadeIn = () => {
  return (
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
      Hello world!
    </motion.div>
  );
};

在这个例子中，我们设置了 initial 和 animate 属性，它们对应着元素的初始状态和动画后的状态。在这个例子中，我们设置了元素初始时的不透明度为 0，动画后的不透明度为 1。这里的动画效果是淡入。

实现页面转换

为了实现页面转换，我们需要创建两个组件：一个是当前页面组件，另一个是目标页面组件。这两个组件都需要使用 <motion> 组件进行包裹，然后在点击页面转换按钮时，我们可以使用 Framer Motion 的 AnimatePresence 组件来实现动画。

下面的例子中，我们将实现两个页面之间的左右滑动过渡效果。首先，我们定义两个页面组件 PageA 和 PageB：

import { motion } from "framer-motion";

const PageA = ({ setPage }) => {
  return (
    <motion.div
      exit={{ x: "-100%" }}
      initial={{ x: "100%" }}
      animate={{ x: 0 }}
    >
      <h1>Page A</h1>
      <button onClick={() => setPage("PageB")}>Go to Page B</button>
    </motion.div>
  );
};

const PageB = ({ setPage }) => {
  return (
    <motion.div
      exit={{ x: "100%" }}
      initial={{ x: "-100%" }}
      animate={{ x: 0 }}
    >
      <h1>Page B</h1>
      <button onClick={() => setPage("PageA")}>Go to Page A</button>
    </motion.div>
  );
};

在这个例子中，我们设置了每个页面组件的 exit、initial 和 animate 属性，这些属性分别定义了过渡的出入场动画效果。

接下来，我们创建一个 App 组件，它包含两个页面组件和一个当前页面状态值。为了在页面转换时实现过渡效果，我们使用了 AnimatePresence 组件：

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import PageA from "./PageA";
import PageB from "./PageB";

const App = () => {
  const [page, setPage] = useState("PageA");

  return (
    <div>
      <AnimatePresence exitBeforeEnter>
        {page === "PageA" ? (
          <PageA key="PageA" setPage={setPage} />
        ) : (
          <PageB key="PageB" setPage={setPage} />
        )}
      </AnimatePresence>
    </div>
  );
};

export default App;

在这个例子中，我们设置了 AnimatePresence 组件的 exitBeforeEnter 属性为 true，这样在页面转换动画完成前，当前页面会先进行出场动画，然后才会加载目标页面并播放入场动画。

总结

在本文中，我们介绍了如何使用 Framer Motion 在 React.js 应用程序中实现页面转换过渡效果。我们学习了如何使用 <motion> 组件来创建动画，以及如何使用 AnimatePresence 组件来实现页面转换过渡动画。希望这篇文章对你有所帮助。