Анимация React UI стала проще

Что делает интерфейс элегантным, сексуальным и красивым? Дизайн — это первое, что приходит на ум. Современному Интернету предстоит пройти долгий путь! Пришло время вывести веб-интерфейс на новый уровень с анимацией. Я сбился со счета, сколько раз меня поражала красивая анимация iOS и Android, в то время как большинство моих веб-приложений остаются статичными и «скучными». Статичный дизайн похож на красивый 👸 на постере. Он не двигается и не взаимодействует с вами! Анимация делает статический интерфейс живым и ярким.

Вернемся к моему опыту: переключение (отображение/скрытие) элемента — одна из самых распространенных задач в пользовательском интерфейсе, которую я долгое время выполнял, как показано ниже… (постыдно)

import React from 'react';

export default function Component ({ isContentReady }) {
    return isContentReady ? <div>Content</div> : null;
}

Я медленно перешел от этого к css, чтобы выполнять переключение

.wrapper {
  transition: 1s all;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

import React from 'react';
import styles from './styles.css'

export default function Component ({ isContentReady }) {
    return <div className={styles.wrapper}>
        <span className={isContentReady ? styles.show : styles.hide}>Content</span>
    </div>;
}

Хотя это работает, я часто терял представление о том, как выглядит фактический стиль, когда бегло просматривал код. Я продолжал чувствовать, что это не лучший подход к реализации анимации.

Должен быть лучший и простой способ выполнения анимации в React. Поэтому я написал свой собственный. Я представляю вам реагировать-просто-анимировать.

import React from 'react';
import Animate from 'react-simple-animate';

export default function Component ({ isContentReady }) {
    return <Animate 
      play={isContentReady}
      start={{ opacity: 0 }}
      end={{ opacity: 1 }}
    >
      Content
    </Animate>;
}

Декларативный и простой способ выполнить анимацию в реакции. Я могу контролировать начало анимации и стили, применяемые в конце анимации. На мой взгляд, это хороший образец. Ура!

Реагировать на простую анимацию

Реагируйте на простую анимацию 🤘 — это то, что вам нужно! О да, мой 2c стоит того, чтобы внести свой вклад в сообщество после многих лет использования программного обеспечения с открытым исходным кодом (тоже впервые). Цель состоит в том, чтобы максимально упростить анимацию пользовательского интерфейса для React.

Вот два замечательных примера того, чего мне удалось добиться с помощью react-simple-animate:

Хотя простая анимация React великолепна, у нее есть свои плюсы и минусы:

😍 Плюсы:

Простая анимация из встроенного стиля A в стиль B
Декларатив для анимации компонентов
Упростите переключение анимации
Поддержка анимационных последовательностей
Поддержка анимации ключевых кадров
Это крошечный размер (2,2 КБ)

😑 Минусы:

это сделано для простой анимации 🤘

Лучший способ убедиться в простоте — попробовать это самостоятельно, что вы можете сделать с демо.

В общем надеюсь реагировать-просто-анимировать поможет каждому создать более элегантный пользовательский интерфейс с красивой анимацией, и, конечно же, спасибо, что уделили время чтению этого и опробованию пакета. 🤘