返回

用react-router 6.14.x和framer-motion搭建酷炫的路由过场动画

前端

使用 React Router 和 Framer Motion 实现优雅的路由过场动画

什么是 React Router？

React Router 是 React 应用的路由库，让你轻松创建和管理路由，并处理路由事件。

什么是 Framer Motion？

Framer Motion 是 React 应用的动画库，让你轻松创建和管理动画，并控制动画属性。

将 React Router 和 Framer Motion 结合使用

将 React Router 和 Framer Motion 结合使用，可以为你的应用程序实现令人惊叹的路由过场动画。只需几个简单的步骤，你就可以实现动态而引人入胜的页面切换效果。

安装

首先，你需要安装 React Router 和 Framer Motion：

npm install react-router-dom framer-motion

创建 App.js

接下来，在你的项目中创建一个名为 App.js 的文件，并编写以下代码：

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { AnimatePresence } from "framer-motion";

const App = () => {
  return (
    <BrowserRouter>
      <AnimatePresence>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </AnimatePresence>
    </BrowserRouter>
  );
};

export default App;

创建 Home、About 和 Contact 组件

现在，创建 Home、About 和 Contact 组件，并使用 Framer Motion 的 motion 组件实现动画效果：

import { motion } from "framer-motion";

const Home = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <h1>Home</h1>
    </motion.div>
  );
};

const About = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <h1>About</h1>
    </motion.div>
  );
};

const Contact = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      <h1>Contact</h1>
    </motion.div>
  );
};

export { Home, About, Contact };

启动项目

最后，在你的 index.js 文件中启动你的项目：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

效果

现在，当你运行你的应用程序时，你将看到流畅而引人入胜的路由过场动画。当你在页面之间切换时，页面会优雅地淡入和淡出。

常见问题解答

1. 为什么我看到路由过场动画？

你看到路由过场动画是因为你使用了 Framer Motion 的 AnimatePresence 组件。该组件在路由发生变化时自动处理动画。

2. 我如何自定义动画效果？

你可以通过修改 initial、animate 和 exit 属性来自定义动画效果。这些属性控制动画的初始状态、活动状态和退出状态。

3. 我可以使用其他动画库吗？

是的，你还可以使用其他动画库，如 React Transition Group 或 GSAP。然而，Framer Motion 是一个专门针对 React 的出色选择。

4. 我可以在哪里了解更多信息？

有关 React Router 和 Framer Motion 的更多信息，请参考他们的官方文档：

5. 我如何报告问题或获得支持？

如果你遇到任何问题或需要支持，可以访问 React Router 和 Framer Motion 的 GitHub 存储库：

结论

使用 React Router 和 Framer Motion，你可以为你的应用程序实现令人惊叹的路由过场动画。通过结合这两个库的力量，你可以创建动态且引人入胜的页面切换体验，让你的用户满意。