Задержки показа

В Radix UI механизм отображения и скрытия компонентов часто требует точной настройки задержек для создания плавного пользовательского опыта. Особенно это актуально для компонентов вроде Tooltip, Popover, Dropdown Menu и Hover Card, где мгновенное появление или исчезновение элемента может выглядеть резким или раздражающим.

Основные свойства задержек

Radix UI предоставляет два ключевых свойства для управления временем появления и исчезновения компонентов:

  1. delayDuration – задаёт общую задержку до появления компонента после срабатывания события (например, наведения мыши).
  2. disableDelay – отключает любые встроенные задержки, заставляя компонент реагировать мгновенно.

Например, в компоненте Tooltip:

import * as Tooltip from '@radix-ui/react-tooltip';

<Tooltip.Provider delayDuration={300}>
  <Tooltip.Root>
    <Tooltip.Trigger>Наведи на меня</Tooltip.Trigger>
    <Tooltip.Content>
      Подсказка появится через 300 мс
    </Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

Здесь 300 мс – стандартная задержка перед появлением подсказки. Если требуется мгновенная реакция, можно использовать delayDuration={0} или disableDelay.

Раздельная настройка задержки показа и скрытия

Некоторые компоненты, например Popover или Hover Card, поддерживают раздельную настройку задержек для показа и скрытия. Это достигается через свойства:

  • openDelay – задержка перед открытием компонента.
  • closeDelay – задержка перед закрытием компонента.

Пример для Hover Card:

import * as HoverCard from '@radix-ui/react-hover-card';

<HoverCard.Root openDelay={400} closeDelay={200}>
  <HoverCard.Trigger>Наведи на меня</HoverCard.Trigger>
  <HoverCard.Content>
    Контент появится через 400 мс и исчезнет через 200 мс
  </HoverCard.Content>
</HoverCard.Root>

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

Взаимодействие с анимацией

Задержки показа тесно связаны с анимациями. Radix UI использует свойство motion и поддерживает подключение CSS-переходов через классы. Если анимация появления длится дольше, чем задержка открытия, компонент может визуально появляться “резко”. Чтобы избежать этого:

  • Совмещать openDelay с CSS-анимацией, учитывая её длительность.
  • Для сложных анимаций использовать onOpenChange для контроля времени начала анимации.

Пример с CSS-переходом:

.tooltip-content {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.tooltip-content[data-state='open'] {
  opacity: 1;
}
<Tooltip.Root delayDuration={200}>
  <Tooltip.Trigger>Наведи</Tooltip.Trigger>
  <Tooltip.Content className="tooltip-content">
    Появление с плавной анимацией
  </Tooltip.Content>
</Tooltip.Root>

Динамическая корректировка задержек

Radix UI позволяет изменять задержки динамически, что полезно для адаптивного UX. Например, на мобильных устройствах задержку показа можно уменьшить, чтобы избежать лишней паузы при касании:

const isMobile = window.innerWidth < 768;
const delay = isMobile ? 50 : 300;

<Tooltip.Provider delayDuration={delay}>
  ...
</Tooltip.Provider>

Особенности поведения при повторном наведении

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

  • При уходе курсора таймер открытия обнуляется.
  • При повторном наведении запускается новый таймер с текущей openDelay.
  • Свойство disableDelay полностью отключает такую логику, делая реакции мгновенными.

Настройка через Provider vs локальные свойства

  • Tooltip.Provider или Popover.Provider задаёт глобальную задержку для всех вложенных компонентов.
  • Локальные свойства на уровне Root или Trigger переопределяют глобальные настройки для конкретного элемента.
<Tooltip.Provider delayDuration={300}>
  <Tooltip.Root delayDuration={100}>
    <Tooltip.Trigger>Локальная задержка</Tooltip.Trigger>
    <Tooltip.Content>Только для этого Tooltip 100 мс</Tooltip.Content>
  </Tooltip.Root>
</Tooltip.Provider>

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

  • Использовать минимально необходимую задержку для улучшения UX.
  • Для интерактивных элементов (Dropdown, Popover) раздельно настраивать openDelay и closeDelay.
  • Совмещать задержки с анимацией появления для плавного визуального эффекта.
  • При адаптивной верстке уменьшать задержку на мобильных устройствах.
  • Для критически важных подсказок применять disableDelay для мгновенного отображения.

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

Оглавление