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

React.js 框架可以在访问不同链接时创建单页应用程序而无需重新加载页面。当你从一个链接移动到另一个链接时，变化是如此之快，以至于很难判断内容是否真的发生了变化。因此，我们可以在浏览网站上的不同链接或路线时实现转换行为。这改善了应用程序的用户体验。在本文中，我们将使用 Framer 运动包来创建页面过渡。

方法：我们将为 GeeksforGeeks 创建一个投资组合应用程序。我们将创建一个导航栏组件。使用 Navbar 组件，我们可以导航到不同的组件，例如 Home、About 和 Contact。我们将使用成帧器动作在我们的 React 应用程序中将页面转换添加到不同的路由。

请按照以下步骤开始。

第 1 步：创建 React 应用程序

创建一个项目目录，转到终端，然后使用以下命令创建一个名为“portfolio”的 React 应用程序：

npx create-react-app portfolio 

创建投资组合应用程序后，使用以下命令切换到新文件夹投资组合：

cd portfolio

第 2 步：目录结构目前如下所示：

最终项目结构

第 3 步：安装所需的软件包。

• react-router-dom (v5): 用于路由
• framer-motion：用于创建页面过渡

安装依赖

使用以下命令安装以下依赖项：

npm i react-router-dom framer-motion

第 4 步：将代码添加到您的 index.html 文件。

在您的 index.html 文件中包含以下代码，该文件位于项目目录的公共文件夹中。我们将使用引导程序来构建我们的导航栏组件。将引导 CDN 导入 index.html，如下所示：

链接：将以下代码放在正文的末尾。

链接：将以下代码放在头部的末尾：

index.html：将以下代码添加到 index.html 文件中：

HTML

    
    
    
    
    
    
    
    React App


    
  
    
     

第 5 步：为所有路由创建转换。我们将创建一个简单的淡入淡出动画。

在您的Src文件夹中，创建一个名为Components的新文件夹。在 Components 文件夹中，创建一个名为Transitions.js的新文件。

我们将创建一个过渡组件并为子组件传递道具，因此它会渲染包含在其中的任何内容。安装组件后，我们需要将其包装在名为“motion.div”的 Framer Motion 组件中。

因此，我们将导入运动组件：

import { motion } from 'framer-motion';

我们将添加在成帧器运动中定义的某些道具，例如

• initial：这表示组件在动画开始时的外观。
• animate：这是组件完成动画后的样子。
• exit：这定义了组件在动画结束后的样式。
• 过渡：这指定我们希望持续时间持续多长时间。

我们将配置动画道具并将它们传递给使我们能够定义动画状态的变体。

起初，道具是不可见的。最初，不透明度保持为 0 以使其不可见。然后它将动画 3 秒钟以变得可见。这将创建一个简单的淡入淡出动画。

Transition.js：将以下代码添加到 Transition.js 文件中：

Javascript

import { motion } from "framer-motion";
const animationConfiguration = {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    exit: { opacity: 0 },
};
const Transitions = ({ children }) => {
    return (
        
            {children}
        
    );
};
export default Transitions;

第 6 步：为 Homepage 创建 Home 组件。在 Components 文件夹中，创建一个名为Home.js的新文件。我们将为主页创建一个 Home 组件，并将该组件包装在 Transitions 组件中以创建页面转换。

Javascript

import React from 'react'
import Transitions from './Transition'
  
const Home = () => {
    return (
        <>
            
                

                    Welcome to GeeksforGeeks
                
            
        
    )
}
  
export default Home

第 7 步：为 About Us 页面创建 About 组件。

我们将在 Components 文件夹中创建一个名为 About.js 的新文件，然后将 About 组件包装在 Transitions 组件中，以在我们在路由之间切换时创建动画。 About 组件包含对 GeeksforGeeks 的简短描述。

• 关于我们：在 About.js 文件中添加以下代码。

Javascript

import React from 'react'
import Transitions from './Transition'
  
const About = () => {
    return (
        <>
            
                

                    GeeksforGeeks is a computer 
                    science portal for Geeks.
                
            
        
    )
}
  
export default About

第 8 步：为联系我们页面创建联系组件。

我们将在 Components 文件夹中创建一个名为 Contact.js 的新文件，然后将 About 组件包装在 Transitions 组件中，以在我们在路由之间切换时创建动画。 Contact 组件包含 GeeksforGeeks 的联系地址。

• 联系我们：将以下代码添加到 Contact.js 文件。

Javascript

import React from 'react'
import Transitions from './Transition'
  
const Contact = () => {
    return (
        <>
            
                

                    Address : GeeksforGeeks
                    

                    5th & 6th Floor, Royal Kapsons, A- 118,
                    Sector- 136, Noida, Uttar Pradesh (201305)
                
            
        
    )
}
  
export default Contact

第 9 步：创建导航栏组件

在名为 Navbar.js 的组件文件夹中创建一个新文件。我们将使用 Bootstrap 制作一个导航栏，并添加主页、关于我们和联系我们的链接。我们将从 react-router-dom 包中导入链接。

import {Link} from 'react-router-dom'

Javascript

import React from 'react'
import { Link } from 'react-router-dom'
  
const Navbar = () => {
    return (
        <>
            

                

                    
                        GeeksforGeeks
                    
                    
                        
                    
                    

                        

                            

                                Home
                            
                            

                                
                                    About Us
                                
                            
                            

                                
                                    Contact Us
                                
                            
                        
                    
                
            
        
    )
}
  
export default Navbar

第 10 步：传递根 App 组件中的组件。在 App.js 文件中，我们将创建一个动画组件。

Framer Motion 由 AnimatePresence 组件组成，该组件跟踪组件的卸载。当组件卸载时，它会触发退出道具。我们将传递 exitBeforeEnter 属性，确保一次渲染一个组件。

因此，我们将导入 AnimatePresence：

import { AnimatePresence } from 'framer-motion';

我们将在动画组件中使用 react-router-dom 为所有路由设置路由。因此，我们将从 react-router-dom 中导入 Router、Switch 和 Link。

import { BrowserRouter as Router, Switch, 
    Route, Link } from "react-router-dom";

如果子组件发生变化，动画存在将起作用。在我们的例子中，我们想要页面之间的过渡。我们的开关是一个子组件，我们需要传递一个唯一的键。由于我们想要路径更改的转换，我们将使用 UseLocation 挂钩将路径作为键传递。

我们将把我们的导航栏组件和动画组件传递给根 App 组件。

• App.js：在 应用程序.js 文件。

Javascript

import './App.css';
import React from "react"
import { BrowserRouter as Router, Switch, 
    Route, Link } from "react-router-dom";
import { useLocation } from 'react-router-dom';
import About from './Components/About';
import Contact from './Components/Contact';
import Home from './Components/Home';
import Navbar from './Components/Navbar';
import { AnimatePresence } from 'framer-motion';
  
const Animated = () => {
    const location = useLocation();
    return (
        
  
            
                
  
                
                
            
        
    )
}
  
function App() {
    return (
        

            <>
                
                    
                    
                
            
        
    );
}
  
export default App;

第 11 步：您的 index.js 文件应如下所示。 index.js 文件作为主要入口点，在其中，App.js 文件在 DOM 的根 ID 处呈现。

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
  
  
ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

GeeksforGeeks 投资组合应用程序已准备就绪。

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：默认情况下，React 项目将在端口 3000 上运行。您可以在浏览器上通过 localhost:3000 访问它。我们将在浏览页面时观察页面之间的转换。

GeeksforGeeks 投资组合应用程序：页面转换