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

Курсы

Программирование
Java Developer. Professional Highload Architect C++ Developer. Basic Специализация C++ Developer C++ Developer. Professional Java Developer. Basic Kotlin Developer. Basic Microservice Architecture JavaScript Developer. Basic Cloud Solution Architecture Team Lead C# Developer. Professional Алгоритмы и структуры данных Rust Developer C# Developer. Basic NoSQL Выбор профессии в IT
-99%
Python Developer. Basic Python Developer. Professional Базы данных iOS Developer. Professional React.js Developer Scala-разработчик Специализация iOS Unity Game Developer. Basic MS SQL Server Developer Kotlin Backend Developer Node.js Developer Symfony Framework PHP Developer. Basic Буткемп Java Groovy Developer
Специализации Курсы в разработке Подготовительные курсы Подписка
+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 комментариев
Для комментирования необходимо авторизоваться