Переходы CSS при изменении состояния React

Переход CSS transition плавно изменяет свойство между двумя значениями с течением времени вместо мгновенного переключения. Вы задаёте его для элемента с помощью transition: property duration timing-function delay.

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

Распространённый шаблон — хранить логическое значение в useState и менять класс CSS при его изменении. Когда класс меняется, целевое свойство получает новое значение, а CSS анимирует разницу между ними.

Например, isOpen определяет, есть ли у элемента класс open, а класс open задаёт другую высоту или преобразование.

Типичная настройка выглядит так: const [isVisible, setIsVisible] = useState(false). Кнопка вызывает setIsVisible(v => !v), чтобы переключить состояние.

Функциональная форма обновления v => !v предотвращает использование устаревшего состояния, когда несколько обновлений становятся в очередь, и делает переключение надёжным.

Вы создаёте className динамически: className={'panel ' + (isVisible ? 'panel--shown' : 'panel--hidden')}. Базовый класс содержит объявление перехода, а классы-модификаторы — начальное и конечное значения.

Если хранить transition во всегда присутствующем базовом классе, анимация будет выполняться в обоих направлениях — при открытии и закрытии.

Можно анимировать несколько свойств одновременно, перечислив их: transition: transform 300ms ease, opacity 300ms ease. Эффект плавного появления сочетает изменение непрозрачности с перемещением по оси Y с помощью преобразования.

Одновременная анимация создаёт аккуратное появление: элемент скользит вверх и постепенно становится непрозрачным.

transition-delay откладывает начало перехода. Если задать элементам списка постепенно увеличивающиеся задержки, получится каскадное появление, при котором каждый элемент анимируется немного позже предыдущего.

В React задержку можно вычислять непосредственно в строке, например style={{ transitionDelay: index * 50 + 'ms' }}.

Свойство display нельзя анимировать, поскольку между none и block нет промежуточных значений. Переход этого свойства приводит к мгновенному скачку, а не к плавному появлению.

Вместо этого анимируйте opacity для визуального появления и переключайте pointer-events: none, чтобы скрытый элемент игнорировал щелчки, пока он невидим.

Функция времени определяет, как меняется скорость на протяжении всей длительности. linear обеспечивает постоянную скорость, ease медленно начинается и заканчивается, а cubic-bezier(...) позволяет задать полностью собственную кривую.

Собственные кривые отлично подходят для резких или пружинящих эффектов, например cubic-bezier(0.34, 1.56, 0.64, 1) создаёт небольшое превышение конечного значения.

Длительности можно хранить в пользовательских свойствах CSS, например --speed: 300ms, и повторно использовать их: transition: opacity var(--speed) ease. Это сохраняет единообразную длительность переходов в разных компонентах.

React может даже задавать переменную непосредственно в строке с помощью style={{ '--speed': '500ms' }}, позволяя свойствам компонента управлять длительностью анимации.

Браузеры могут анимировать transform и opacity на композиторе GPU без перерасчёта компоновки и перерисовки. Анимация таких свойств, как width, top или margin, заставляет браузер выполнять работу по компоновке на каждом кадре и может приводить к рывкам.

Когда нужно переместить, масштабировать или повернуть элемент, используйте transform; когда нужно создать плавное появление, используйте opacity.

Надёжный переход в React сочетает логическое состояние, условный класс-модификатор и базовый класс, объявляющий transition для свойств, подходящих для GPU. Состояние меняет класс, а CSS выполняет анимацию.

Так компоненты остаются декларативными, а браузер создаёт плавное движение.

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

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

Вы также познакомились с функциями времени, длительностями в переменных CSS и узнали, почему свойства, компонуемые на GPU, обеспечивают плавность движения.