Фреймворк React-reveal | OTUS
⚡ Подписка на курсы OTUS!
Интенсивная прокачка навыков для IT-специалистов!
Подробнее

Курсы

Программирование
Python Developer. Professional
-3%
Разработчик на Spring Framework
-5%
iOS Developer. Professional
-8%
Golang Developer. Professional
-6%
Базы данных
-12%
Agile Project Manager
-5%
Android Developer. Professional
-11%
Microservice Architecture
-5%
C++ Developer. Professional
-5%
Highload Architect
-6%
JavaScript Developer. Basic
-8%
Backend-разработчик на PHP
-9%
C# Developer. Professional
-9%
Team Lead
-6%
Алгоритмы и структуры данных Разработчик программных роботов (RPA) на базе UiPath и PIX Unity Game Developer. Basic Разработчик голосовых ассистентов и чат-ботов Vue.js разработчик VOIP инженер NoSQL Супер-практикум по использованию и настройке GIT Symfony Framework iOS Developer. Basic Супер-интенсив «СУБД в высоконагруженных системах» Супер-интенсив "Tarantool"
Инфраструктура
DevOps практики и инструменты
-12%
Базы данных
-12%
Network engineer. Basic
-10%
Network engineer
-4%
Экcпресс-курс «ELK»
-10%
Инфраструктурная платформа на основе Kubernetes
-6%
Administrator Linux.Basic
-10%
Экспресс-курс «CI/CD или Непрерывная поставка с Docker и Kubernetes»
-30%
Дизайн сетей ЦОД
-13%
PostgreSQL
-8%
Разработчик программных роботов (RPA) на базе UiPath и PIX Reverse-Engineering. Professional Внедрение и работа в DevSecOps Administrator Linux. Advanced Infrastructure as a code in Ansible Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Экспресс-курс «IaC Ansible»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Фреймворк React-reveal

Существуют разные способы создания анимации в приложении ReactJS. Зачастую разработчики используют только возможности CSS, добавляя классы в HTML-теги. Это хороший метод, но есть и другие. Один из них — React Reveal.

React Reveal представляет собой анимационный фреймворк для React. В этом фреймворке есть как основные простые анимации (отражение, масштабирование, постепенное исчезновение, вращение), так и более сложные анимации.

Фреймворк позволяет управлять анимациями посредством props. К примеру, вы сможете это делать, задавая дополнительные настройки: задержку, расстояние, положение, каскад и т. п. Кроме того, допускается использование кастомных CSS-эффектов, серверного рендеринга, компонентов высокого порядка. А если вы ещё и любите анимацию прокрутки, то React Reveal вам точно подойдёт.

import Fade from 'react-reveal/Fade';

<Fade top>
    <h1>Title</h1>
</Fade>

Посмотрите на следующую анимацию прокрутки:

react_app_animation_pic7_1-20219-dc4f85.gif

Как видите, мы имеем пять блоков, каждый их которых обладает полноэкранной страницей и внутренним заголовком. Вот как это реализуется:

import React, { Component, Fragment } from 'react';
import Fade from 'react-reveal/Fade';

const animateList = [1, 2, 3, 4, 5];

export default class ReactReveal extends Component {
    render() {
        return (
            <Fragment>
                {animateList.map((item, key) => (
                    <div style={styles.block} key={key}>
                        <Fade top>
                            <h1 style={styles.title}>{`block ${item}`}</h1>                       
                        </Fade>
                    </div>
                ))}
            </Fragment>
        );
    }
}

const styles = {
    block: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
        background: '#000',
        borderBottom: '1px solid rgba(255,255,255,.2)',
    },
    title: {
        textAlign: 'center',
        fontSize: 100,
        color: '#fff',
        fontFamily: 'Lato, sans-serif',
        fontWeight: 100,
    },
};

Здесь мы создаём константу animateList (массив содержит пять элементов). Далее, после применения метода массива map, вы уже сможете рендерить каждый элемент в компонентах Fade и вставлять элементы в заголовок. Стили, которые определены в константе styles, характеризуются короткими CSS-стилями для блока и заголовка. Итого получаем пять блоков с анимацией Fade сверху. Как видите, это совсем несложно.

Источник — «5 Ways to animate a React app».

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться