Отключение анимаций

Tippy.js предоставляет гибкую систему анимаций для всплывающих подсказок, которая по умолчанию использует эффект “fade” с плавным переходом. В ряде случаев требуется отключить анимации полностью, чтобы подсказки появлялись мгновенно без визуальных эффектов. Это может быть необходимо для повышения производительности, соответствия корпоративным стандартам интерфейса или упрощения тестирования.

Настройка без анимации

Для отключения анимации используется опция animation. По умолчанию она принимает строковые значения стандартных эффектов, таких как "fade", "scale", "shift-away" и другие. Чтобы полностью убрать анимацию, необходимо присвоить ей значение false.

tippy('#myButton', {
  content: 'Подсказка без анимации',
  animation: false
});

В этом примере всплывающая подсказка появится мгновенно при наведении на элемент с id="myButton", без каких-либо переходов.

Полное отключение duration

Даже при отключенной анимации иногда важно убедиться, что временные параметры перехода не влияют на скорость отображения. Tippy.js поддерживает опцию duration, которая задаёт длительность появления и скрытия подсказки. Она принимает число (в миллисекундах) или массив из двух чисел [showDuration, hideDuration].

tippy('#myButton', {
  content: 'Мгновенная подсказка',
  animation: false,
  duration: 0
});

Значение 0 гарантирует, что подсказка появится и исчезнет без задержки, даже если в теме по умолчанию указаны длительные анимации.

Отключение анимаций глобально

Для проектов с большим количеством подсказок удобнее задать отсутствие анимаций глобально через tippy.setDefaults. Это избавляет от необходимости указывать animation: false для каждого элемента:

tippy.setDefaults({
  animation: false,
  duration: 0
});

После этого все последующие вызовы tippy() будут создавать подсказки без анимации и мгновенно.

Совместимость с кастомными темами

При использовании кастомных тем Tippy.js важно учитывать, что CSS-переходы в теме могут создавать эффект анимации даже при animation: false. Для полной деактивации анимации необходимо либо удалить соответствующие CSS-свойства, либо переопределить их:

.tippy-box[data-theme~='custom'] {
  transition: none !important;
}

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

Динамическое отключение анимации

В некоторых случаях требуется отключать анимацию условно, в зависимости от состояния интерфейса. Для этого можно использовать функцию в опции animation:

tippy('#myButton', {
  content: 'Динамическая подсказка',
  animation: () => shouldAnimate ? 'fade' : false
});

Здесь shouldAnimate — логическая переменная, определяющая, будет ли подсказка анимироваться. Это позволяет сочетать подсказки с анимацией и без неё в одном приложении.

Особенности работы без анимации

  • Подсказка появляется мгновенно, что улучшает отклик интерфейса при быстром наведении.
  • Нет задержки исчезновения, что исключает эффекты “залипания” при быстром перемещении курсора.
  • Некоторые плагины Tippy.js, зависящие от анимации (followCursor, sticky), могут вести себя иначе без плавных переходов. В таких случаях рекомендуется протестировать их поведение.

Резюме по отключению анимаций

  • Использовать animation: false для отключения эффекта.
  • Задавать duration: 0 для мгновенного появления и скрытия.
  • Глобально отключать анимации через tippy.setDefaults.
  • При использовании кастомных тем проверять CSS-переходы.
  • Возможна динамическая активация или деактивация анимаций через функцию в опции animation.

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

Оглавление