19.06.2024 в 00:06

Как создать многостраничную анимацию с помощью Framer Motion и React-Router-Dom

Анимация — это то, что превращает обычные сайты в захватывающее и незабываемое зрелище. Они придают вашему сайту индивидуальность и уникальность и заставляют посетителей восхищаться общей эстетикой.

В этой статье мы узнаем, как создавать анимацию, которая поражает воображение пользователей, с помощью Framer motion и React-Router-Dom.

Предварительные условия

Чтобы понять, что мы делаем в этой статье, вы должны обладать некоторыми знаниями о React, Framer motion и React-Router-DOM.

Чтобы лучше изучить Framer motion, вы можете изучить их документацию.

Node.js также должен быть установлен в вашей системе, и у вас должен быть рабочий редактор кода. Я буду использовать VS Code.

Создание проекта

Чтобы настроить наш проект, мы воспользуемся Vite для создания среды разработки React.

Откройте терминал в VScode. Вы можете использовать Ctrl + обратную запятую (`).
В терминале введите следующую команду:

npm create vite@latest

Следуя подсказкам, назовите свой проект и выберите желаемый фреймворк. В нашем случае мы используем React. Это будет проект на JavaScript.
Перейдите в каталог проекта и используйте npm i в терминале.
Чтобы запустить проект, используйте npm run dev.
Не забудьте очистить проект, удалив код в App.js и файлы CSS в папке src.

Как инициализировать Framer Motion и React-Router-Dom

Чтобы установить Framer-motion в свой проект, откройте терминал и введите:

npm i framer-motion

Чтобы установить React-Router-DOM в свой проект, откройте терминал и введите:

npm i react-router-dom

Как настроить компоненты и базовую маршрутизацию с помощью React-Router-DOM

Давайте настроим наши компоненты и страницы, к которым мы будем обращаться в этом проекте.

В папке src создайте новую папку с именем components.
В эту папку мы добавим четыре файла с именами Home.jsx, About.jsx, Projects.jsx и Navbar.jsx.
Внутри первых трех мы создадим функциональный компонент React. Измените содержимое тега h1 в каждом компоненте:

const Home = () => {
 return (
    <div>
     <h1>Home</h1>
    </div>
 )
 }
 
 export default Home

В Navbar нам нужно импортировать Link из React-Router-DOM, чтобы создать элементы якоря. Затем нам нужно создать контейнер, содержащий логотип и навигационные ссылки. Логотип будет связывать точки с нашей индексной страницей.

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

const Navbar () => {
 return (
     <div className="nav">
      <div className="logo">
         <Link className="nav-link" to="/">Lennythedev</Link>
     </div>
     <div>
        <div className="nav-links">
           <div className="nav-item">
            <Link className="nav-link" to="/">Home</Link>
           </div>
           <div className="nav-item">
            <Link className="nav-link" to="/">About</Link>
           </div>
           <div className="nav-item">
            <Link className="nav-link" to="/">Projects</Link>
           </div>
     </div>
     </div>
     </div>
  )
 }

Теперь перейдем к нашему файлу index.js или main.js. Цель состоит в том, чтобы обернуть все наше приложение с помощью BrowserRouter, который обеспечит маршрутизацию внутри нашего приложения.

import React from "react"
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path='/*' element={<App />} />
      </Routes>
    </Router>
  </React.StrictMode>,
)

Теперь в App.js мы завершим последний шаг нашей конфигурации. Мы импортируем наши компоненты, а также некоторые функции из React-Router-DOM и отрисуем наши компоненты. Используя функцию useLocation из React-Router-DOM, мы можем установить текущее местоположение маршрутов, установив ключ на текущий путь.

import './App.css'
import { Routes, Route, useLocation } from 'react-router-dom'
import NavBar from './components/NavBar';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';

function App() {
  const location = useLocation();
  return (
    <>
       <NavBar />
       <AnimatePresence mode='wait'>
       <Routes location={location} key={location.pathname}>
        <Route index element={<Home />} />
        <Route path='/projects' element={<Projects />}/>
        <Route path='/about' element={<About />}/>
       </Routes>
       </AnimatePresence>
    </>
  )
}

export default App

Теперь мы можем добавить наш стиль в App.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
  font-family: "Fira Sans Condensed", sans-serif;
}

html,
body {
  font-family: "Fira Sans Condensed", sans-serif;
  background: rgb(0, 162, 255);
}

.nav {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.nav-links {
  display: flex;
  cursor: pointer;
}

.logo, .nav-item {
  margin: 2em;
  font-weight: 400;
  font-size: 1.5vw;
}

h1{
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 500;
  font-size: 10vw;
  line-height: 1;
  text-transform: uppercase;
}

a {
  text-decoration: none;
  font-weight: 500;
}

После выполнения всех шагов ваше приложение должно выглядеть следующим образом:

Как создавать переходы с помощью Framer Motion

Наконец, давайте создадим анимацию для переходов между страницами.

Создайте файл в компонентах с именем Box.jsx и импортируйте motion из framer-motion.
Затем мы можем вернуть два div с именами классов (classNames) slide-in и slide-out, один для скольжения внутрь, а другой для скольжения наружу.
Мы вставим нашу анимацию в эти div с помощью framer-motion:

import { motion } from "framer-motion"

export default function Box() {
  return(
    <div>
     <motion.div
        className="slide-in"
        initial={{ scaleY: 0 }}
        animate={{ scaleY: 0 }}
        exit={{ scaleY: 1 }}
        transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
     />
     <motion.div
     className="slide-out"
        initial={{ scaleY: 1 }}
        animate={{ scaleY: 0 }}
        exit={{ scaleY: 0 }}
        transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
     />
    </div>
  )
}

Далее мы добавим стили в наш CSS-файл для slide-in и slide-out в App.css:

.slide-in {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #0f0f0f;
  transform-origin: bottom;
}

.slide-out {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background: #0f0f0f;
  transform-origin: top;
}

Наконец, последний шаг – это использование AnimatePresence из framer-motion в нашем файле App.js и обертывание всего приложения в AnimatePresence с установкой режима ожидания. Если вы хотите узнать больше об AnimatePresence, посетите документацию по Framer motion.

import './App.css'
import { Routes, Route, useLocation } from 'react-router-dom'
import NavBar from './components/NavBar';
import Home from './components/Home';
import Projects from './components/Projects';
import About from './components/About';
import { AnimatePresence } from 'framer-motion';

function App() {
  const location = useLocation();
  return (
    <>
       <NavBar />
       <AnimatePresence mode='wait'>
       <Routes location={location} key={location.pathname}>
        <Route index element={<Home />} />
        <Route path='/projects' element={<Projects />}/>
        <Route path='/about' element={<About />}/>
       </Routes>
       </AnimatePresence>
    </>
  )
}

export default App

В итоге наша работа должна выглядеть так, как показано на видео ниже:

Заключение

Создание многостраничной анимации с помощью Framer Motion и React-Router-Dom повышает удобство работы пользователей, обеспечивая плавные переходы.

Эта интеграция использует возможности анимации Framer Motion с функциями маршрутизации React-Router-Dom, что позволяет создавать динамичные, интерактивные веб-приложения.

Источник:

How to Create Multi-Page Animations Using Framer Motion & React-Router-Dom

#JavaScript #React

Войти на сайт