Задержки показа и скрытия

В интерфейсах часто требуется контролировать время появления и скрытия элементов, таких как всплывающие подсказки, модальные окна или меню. В библиотеке React Aria для этого используются концепции showDelay и hideDelay, которые позволяют управлять видимостью компонентов с учётом времени. Эти параметры помогают создавать более естественные и удобные взаимодействия, предотвращая «мигание» элементов при быстрых действиях пользователя.

showDelay определяет задержку перед тем, как элемент становится видимым после триггера (например, наведение мыши или фокус). hideDelay задаёт задержку перед скрытием элемента после того, как триггер перестаёт быть активным.

Использование useTooltipTrigger и задержки

React Aria предоставляет хук useTooltipTrigger, который упрощает управление всплывающими подсказками и включает поддержку задержек.

import { useTooltipTriggerState } from '@react-stately/tooltip';
import { useTooltipTrigger } from '@react-aria/tooltip';
import { useRef } from 'react';

function TooltipExample() {
  const triggerRef = useRef();
  const state = useTooltipTriggerState({ delay: 500 }); // общая задержка
  const { triggerProps, tooltipProps } = useTooltipTrigger({ delay: { show: 300, hide: 200 } }, state, triggerRef);

  return (
    <>
      <button {...triggerProps} ref={triggerRef}>Наведи на меня</button>
      {state.isOpen && <div {...tooltipProps}>Подсказка с задержкой</div>}
    </>
  );
}

Ключевые моменты:

  • delay в useTooltipTrigger может быть объектом { show, hide }, что позволяет отдельно настраивать время появления и скрытия.
  • Использование useTooltipTriggerState обеспечивает реактивное управление состоянием видимости компонента.
  • triggerRef необходим для корректного позиционирования всплывающей подсказки.

Принципы работы задержек

  1. Анимации и предотвращение мигания Задержки особенно полезны при быстром перемещении курсора. Если элемент скрывать мгновенно, пользовательский интерфейс может казаться «дерганым».
  2. Комбинация с событиями фокуса и мыши React Aria автоматически объединяет события mouseenter, mouseleave, focus и blur, обеспечивая единый механизм для показа и скрытия.
  3. Поддержка кастомных состояний Возможна реализация кастомных таймеров для сложных сценариев, например, постепенного увеличения или уменьшения задержки в зависимости от контекста.

Задержки в меню и всплывающих панелях

Для меню и других всплывающих панелей используется useOverlayTriggerState совместно с useOverlayTrigger:

import { useOverlayTriggerState } from '@react-stately/overlays';
import { useOverlayTrigger } from '@react-aria/overlays';

function MenuExample() {
  const triggerRef = useRef();
  const state = useOverlayTriggerState({ delay: { show: 250, hide: 150 } });
  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'menu' }, state, triggerRef);

  return (
    <>
      <button {...triggerProps} ref={triggerRef}>Открыть меню</button>
      {state.isOpen && (
        <div {...overlayProps} style={{ background: 'white', border: '1px solid gray' }}>
          <div>Пункт 1</div>
          <div>Пункт 2</div>
        </div>
      )}
    </>
  );
}

Особенности:

  • Меню использует таймеры для show/hide аналогично всплывающим подсказкам.
  • Отдельные значения show и hide позволяют настраивать пользовательский опыт, например, ускоряя скрытие, но замедляя показ.
  • Комбинация с useOverlayPosition обеспечивает корректное позиционирование вне зависимости от задержек.

Практические советы

  • Минимизировать задержку скрытия для критических элементов: если элемент содержит важную информацию или требует подтверждения действия, hideDelay лучше уменьшить.
  • Использовать плавные анимации совместно с задержками: React Aria не управляет CSS-анимациями, поэтому рекомендуется применять transition для opacity или transform.
  • Отслеживать взаимодействие с несколькими триггерами: если один компонент может быть открыт разными событиями, лучше объединять состояния через хуки состояния.

Интеграция с кастомными компонентами

Можно применять задержки не только к стандартным всплывающим элементам, но и к кастомным компонентам, используя setTimeout совместно с состоянием React для управления показом и скрытием:

const [isVisible, setIsVisible] = useState(false);
let showTimer, hideTimer;

function handleMouseEnter() {
  clearTimeout(hideTimer);
  showTimer = setTimeout(() => setIsVisible(true), 300);
}

function handleMouseLeave() {
  clearTimeout(showTimer);
  hideTimer = setTimeout(() => setIsVisible(false), 200);
}

return (
  <div onMouseEn ter={handleMouseEnter} onMouseLe ave={handleMouseLeave}>
    Триггер
    {isVisible && <div>Элемент с кастомной задержкой</div>}
  </div>
);

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

Итоговые акценты на задержках

  • showDelay и hideDelay управляют восприятием интерфейса, предотвращая резкие вспышки элементов.
  • Хуки React Aria обеспечивают готовую инфраструктуру для управления этими задержками.
  • Для сложных или уникальных случаев можно комбинировать хуки с кастомными таймерами.
  • Синхронизация задержек с анимациями повышает комфорт использования интерфейса.

Задержки показа и скрытия являются фундаментальным инструментом в построении интерактивных и отзывчивых пользовательских интерфейсов на базе React Aria.

Оглавление