Анимация переходов

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

Использование @radix-ui/react-animations и CSS-переменных

Хотя Radix UI сам по себе не навязывает конкретные стили анимации, он предоставляет CSS-переменные, которые позволяют настраивать плавность и длительность переходов. Например, для компонента DropdownMenu можно использовать переменные:

:root {
  --radix-transition-duration: 300ms;
  --radix-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

Эти переменные управляют стандартными переходами открытия и закрытия меню. Любое изменение этих значений автоматически отражается на всех компонентах, использующих стандартные анимации Radix.

Компонентные состояния и анимация

Radix UI строит свои компоненты на контролируемых состояниях, таких как open, closed, active и disabled. Для добавления анимации переходов необходимо использовать эти состояния:

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { keyframes, styled } from '@stitches/react';

const slideDown = keyframes({
  from: { opacity: 0, transform: 'translateY(-10px)' },
  to: { opacity: 1, transform: 'translateY(0)' },
});

const AnimatedContent = styled(DropdownMenu.Content, {
  animation: `${slideDown} 300ms cubic-bezier(0.4, 0, 0.2, 1)`,
});

В этом примере при открытии DropdownMenu содержимое плавно появляется с эффектом сдвига и постепенного проявления. Такой подход позволяет создавать интуитивные визуальные эффекты, которые не требуют ручного контроля состояний через setTimeout или useEffect.

Управление анимацией через state и onOpenChange

Для компонентов с динамическим открытием, например Collapsible или Accordion, анимация часто синхронизируется с состоянием open. Radix UI предоставляет проп onOpenChange, с помощью которого можно добавить кастомные эффекты:

import * as Collapsible from '@radix-ui/react-collapsible';
import { useState } from 'react';

function CollapsibleExample() {
  const [open, setOpen] = useState(false);

  return (
    <Collapsible.Root open={open} onOpenCha nge={setOpen}>
      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
      <Collapsible.Content
        style={{
          transition: 'height 250ms ease, opacity 250ms ease',
          height: open ? 'auto' : 0,
          opacity: open ? 1 : 0,
          overflow: 'hidden',
        }}
      >
        Контент с анимацией
      </Collapsible.Content>
    </Collapsible.Root>
  );
}

Здесь высота и прозрачность плавно изменяются при открытии и закрытии. Это позволяет добиться естественного эффекта развертывания, характерного для современных интерфейсов.

Анимация модальных окон

Для модальных окон и диалогов (Dialog) Radix UI рекомендует использовать keyframe-анимации с fade-in и scale:

import * as Dialog from '@radix-ui/react-dialog';

const fadeInScale = keyframes({
  from: { opacity: 0, transform: 'scale(0.95)' },
  to: { opacity: 1, transform: 'scale(1)' },
});

const AnimatedDialogContent = styled(Dialog.Content, {
  animation: `${fadeInScale} 300ms ease-out`,
});

Комбинация прозрачности и масштабирования создаёт эффект возникновения окна из центра экрана, что улучшает восприятие интерфейса пользователем.

Тонкая настройка с использованием stitches или Tailwind

Radix UI хорошо интегрируется с CSS-in-JS библиотеками, такими как Stitches или Tailwind CSS, что позволяет задавать анимации через классы или объекты стилей. Основные паттерны включают:

  • Fade — плавное проявление через opacity
  • Slide — смещение элемента при открытии
  • Scale — масштабирование для модальных окон и всплывающих панелей
  • Combine — комбинированные эффекты (slide + fade, scale + fade)

Эти эффекты применяются к дочерним элементам через styled или классы, что делает анимацию модульной и повторно используемой.

Практические рекомендации

  • Использовать CSS-переменные Radix для согласованности всех переходов.
  • Применять keyframes и transition вместо явного управления через JS для производительности.
  • Для динамических компонентов синхронизировать анимацию с состоянием open.
  • Объединять эффекты fade, slide и scale для визуально приятных переходов.
  • Минимизировать сложные анимации на мобильных устройствах для сохранения плавности.

Анимация переходов в Radix UI позволяет создавать интерфейсы с профессиональной визуальной динамикой, сохраняя при этом контроль над состояниями компонентов и согласованность пользовательского опыта.

Оглавление