Фреймворк React-reveal | OTUS
🔥 Начинаем BLACK FRIDAY!
Максимальная скидка -25% на всё. Успейте начать обучение по самой выгодной цене.
Выбрать курс

Курсы

Программирование
iOS Developer. Basic
-25%
Python Developer. Professional
-25%
Разработчик на Spring Framework
-25%
Golang Developer. Professional
-25%
Python Developer. Basic
-25%
iOS Developer. Professional
-25%
Highload Architect
-25%
JavaScript Developer. Basic
-25%
Kotlin Backend Developer
-25%
JavaScript Developer. Professional
-25%
Android Developer. Basic
-25%
Unity Game Developer. Basic
-25%
Разработчик C#
-25%
Программист С Web-разработчик на Python Алгоритмы и структуры данных Framework Laravel PostgreSQL Reverse-Engineering. Professional CI/CD Vue.js разработчик VOIP инженер Программист 1С Flutter Mobile Developer Супер - интенсив по Kubernetes Symfony Framework Advanced Fullstack JavaScript developer Супер-интенсив "Azure для разработчиков"
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-25%
DevOps практики и инструменты
-25%
Архитектор сетей
-25%
Инфраструктурная платформа на основе Kubernetes
-25%
Супер-интенсив «IaC Ansible»
-16%
Разработчик программных роботов (RPA) на базе UiPath и PIX
-25%
Administrator Linux. Professional MS SQL Server Developer Безопасность Linux PostgreSQL Reverse-Engineering. Professional CI/CD VOIP инженер Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Administrator Linux.Basic Супер-интенсив «ELK»
Специализации Курсы в разработке Подготовительные курсы
+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 комментариев
Для комментирования необходимо авторизоваться
🎁 Максимальная скидка!
Черная пятница уже в OTUS! Скидка -25% на всё!