Анимация

1. Ванильный CSS

CSS3 переходы и анимации это лучший метод для простой анимации, но только в тех случаях, когда над анимируемым элементом не выполняются операции удаления и добавления в DOM.

Использование CSS для скрытия элементов противоречит идеологии React, разметка остается в DOM-дереве, и практически невозможно нормально сделать анимацию исчезновения. Анимация добавления и удаления элементов коллекции излишне сложная.

2. React Transition Group

Эта библиотека не анимирует стили самостоятельно. Вместо этого, разработчику предоставляется набор простых компонентов, которые отслеживают этапы перехода состояния элемента (добавления и удаления в DOM) и управляют CSS-стилями, тем самым позволяя применить определенный CSS на каждом этапе.

npm install react-transition-group

React Transition Group

2.1. Компонент Transition

Компонент на базе которого построены остальные. Позволяет описывать переход компонента от одного состояния к другому с течением времени. По умолчанию компонент <Transition> не изменяет поведение компонента, который он отображает, а только отслеживает состояния enter и exit. Разработчик может сделать кастомные эффекты (например, добавляя инлайн стили или классы) под эти состояния.

Существует 4 основных состояния, в которых может быть элемент:

• entering - элемент появляется в DOM

• entered - элемент появился в DOM

• exiting - элемент удаляется из DOM

• exited - элемент удален из DOM

Пропы:

• in - буль, сигнализирует о начале стадии появления или удаления элемента.

• timeout - время перехода, кол-во миллисекунд которое будет использовано для всех стадий, либо объект с полями под стадии enter и exit.

• unmountOnExit - отвечает за удаление элемента из DOM-дерева после фазы exit.

Если значение пропа in равно true, компонент начинает стадию входа. Он переходит из текущего состояния к entering и останавливается в нем на указанное в timeout время, по истечении которого переходит в entered.

Если значение пропа in равно false, компонент начинает стадию Выхода. Он переходит из текущего состояния к exiting и останавливается в нем на указанное в timeout время, по истечении которого переходит в exited.

2.2. Компонент CSSTransition

Компонент <CSSTransition>, в отличии от <Transition>, инкапсулирует отслеживание стадии перехода и вызывает перекомпоновку (reflow) в браузере, что позволяет без дополнительных усилия реализовать анимацию добавления элемента. Получает те же самые пропы in, timeout и другие, а также проп classNames, в котором можно указать кастомные имена классов для каждой фазы перехода.

Применяет пару CSS-классов для каждой из стадий appear, enter, exit и done во время перехода. На старте каждой фазы применяется базовый класс, после чего сразу применяется класс с приставкой active. Разработчику достаточно передать имя базового класса и описать классы для каждой из стадий.

К примеру если базовый класс fade:

/* Применится как только элемент будет добавлен в DOM */
.fade-enter {
}

/*
* Применится на следующий тик после fade-enter
* Сюда добавляем свойство transition
*/
.fade-enter-active {
}

/* Применится как только проп in получит false */
.fade-exit {
}

/*
* Применится на следующий тик после fade-exit
* Сюда добавляем свойство transition
*/
.fade-exit-active {
}

Пропу classNames можно передать объект с кастомными именами классов под каждую стадию.

classNames={{
 appear: 'my-appear',
 appearActive: 'my-active-appear',
 appearDone: 'my-done-appear',
 enter: 'my-enter',
 enterActive: 'my-active-enter',
 enterDone: 'my-done-enter',
 exit: 'my-exit',
 exitActive: 'my-active-exit',
 exitDone: 'my-done-exit',
}}
Copy

Если используются CSS-модули, то имена классов можно назвать как имена ключей на объекте для classNames и передать объект классов целиком.

import styles from './styles.module.css';

<CSSTransition classNames={styles}>

2.3. Transition events

Всего 6 штук, происходят в указанном порядке. Используются для управления сложными анимациями и выполнения кода на определенной стадии.

<CSSTransition
  onEnter={() => console.log('onEnter event')}
  onEntering={() => console.log('onEntering event')}
  onEntered={() => console.log('onEntered event')}
  onExit={() => console.log('onExit event')}
  onExiting={() => console.log('onExiting event')}
  onExited={() => console.log('onExited event')}
/>

2.4. Компонент TransitionGroup

Компонент <TransitionGroup> используется как контейнер для управления коллекцией компонентов <Transition> или <CSSTransition>. При удалении и добавлении элементов коллекции, <TransitionGroup> автоматически указывает значение пропа in добавляемого или удаляемого элемента.

Принимает проп component, в котором можно указать тип HTML-элемента который необходимо отрендерить как контейнер, по умолчанию будет div. Для передачи стилей есть проп className, значение которого передается элементу.

2.5. Анимация маршрутов

• RTG With React Router

• React Router Transition

• React Router v4 and animating transitions

2.6. Дополнительные материалы

• Animating The Virtual DOM

• Репозиторий React Motion

• Animations in React Using React Motion

• A gentle introduction to React Motion

• React-motion 101: Springs

• Репозиторий React Move

• Репозиторий styled-transition-group