Простой способ анимации в React | 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%
Node.js Developer
-25%
Unity Game Developer. Professional
-25%
React.js Developer
-25%
Android Developer. Professional
-25%
Software Architect
-25%
C++ Developer. Professional
-25%
Backend-разработчик на PHP Web-разработчик на Python Алгоритмы и структуры данных Framework Laravel PostgreSQL Team Lead Разработчик голосовых ассистентов и чат-ботов Архитектура и шаблоны проектирования Agile Project Manager Нереляционные базы данных Супер - интенсив по паттернам проектирования Супер-практикум по использованию и настройке GIT IoT-разработчик Подготовка к сертификации Oracle Java Programmer (OCAJP) Супер-интенсив «СУБД в высоконагруженных системах» Супер-интенсив "Azure для разработчиков"
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-25%
DevOps практики и инструменты
-25%
Архитектор сетей
-25%
Инфраструктурная платформа на основе Kubernetes
-25%
Супер-интенсив «ELK»
-16%
Супер-интенсив «IaC Ansible»
-16%
Administrator Linux. Professional MS SQL Server Developer Безопасность Linux PostgreSQL Reverse-Engineering. Professional CI/CD VOIP инженер Супер-практикум по работе с протоколом BGP Супер - интенсив по паттернам проектирования Супер - интенсив по Kubernetes Administrator Linux.Basic Супер-интенсив "Tarantool"
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

Простой способ анимации в React

Использование CSS — одни из наилучших способов создания простой анимации в React. Если вы применяете его вместо импорта JavaScript-библиотек, сборка будет небольшой, а браузер затратит меньше ресурсов, что увеличит производительность приложений. Метод вам подойдёт, если анимация простая, а вы беспокоитесь о размерах своей сборки.

В качестве примера рассмотрим гамбургер-меню:

react_app_animation_pic_1_1-1801-aaefc6.gif

Это простейшее меню со свойством CSS и триггером className = "is-nav-open" для тега html. Путей реализации здесь много. К примеру, можно создать wrapper над навигацией и вызывать изменения полей. Тут навигация имеет постоянную ширину (250px) и wrapper со свойством margin-left либо translateX с такой же шириной. Когда надо показать навигацию, добавьте className = "is-nav-open" для wrapper и переместите wrapper на margin-left / translateX: 0;

import React, {Component} from 'react';
import {Icon} from 'antd';
import './style.css';

export default class ExampleCss extends Component {
    constructor(props){
        super(props);
        this.wrapperRef = React.createRef();
    }
    handleClick() {
        const wrapper = this.wrapperRef.current;
        wrapper.classList.toggle('is-nav-open')
    }
    render() {
        return (
            <div ref={this.wrapperRef} className="wrapper">
                <div className="nav">
                    <icon
                        className="nav__icon"
                        type="menu-fold"
                        onClick={() => this.handleClick()}/>
                    <div className="nav__body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Beatae ducimus est laudantium libero nam optio repellat
                        sit unde voluptatum?
                    </div>
                </div>
            </div>
        );
    }
}

А вот и CSS-стили:

.wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: margin .5s;
    margin: 0 0 0 -250px;
}

.wrapper.is-nav-open {
    margin-left: 0;
}

.nav {
    position: relative;
    width: 250px;
    height: 100%;
    padding: 20px;
    border-right: 1px solid #ccc;
}
.nav__icon {
    position: absolute;
    top: 0;
    right: -60px;
    padding: 20px;
    font-size: 20px;
    cursor: pointer;
    transition: color .3s;
}

.nav__icon:hover {
    color: #5eb2ff;
}

Вышеописанный метод пригодится в большинстве случаев. Действительно, проще написать несколько CSS-строк и менять className, чем выполнять импорт больших библиотек и использовать их. А самое главное заключается в том, что ваши пользователи останутся вам благодарны за то, что приложение работает в веб-браузере очень быстро.

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

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

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

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

Автор
0 комментариев
Для комментирования необходимо авторизоваться
🎁 Максимальная скидка!
Черная пятница уже в OTUS! Скидка -25% на всё!