Оптимизация анимаций

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

Выбор типа анимации

По умолчанию Tippy.js использует анимацию shift-away. Она обеспечивает плавное появление подсказки с небольшим смещением от цели. Для изменения анимации используется параметр animation при инициализации:

tippy('.btn', {
  content: 'Подсказка',
  animation: 'scale',
});

Доступные встроенные анимации:

  • fade — постепенное появление и исчезновение;
  • scale — увеличение размера от центра;
  • shift-away — смещение от цели с прозрачностью;
  • shift-toward — смещение к цели;
  • perspective — 3D-эффект при появлении.

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

Настройка длительности и задержки

Tippy.js позволяет задавать время появления и исчезновения с помощью параметров duration и delay. Они могут быть указаны как число в миллисекундах или массив [show, hide]:

tippy('.btn', {
  content: 'Подсказка',
  animation: 'fade',
  duration: [200, 100], // 200ms на появление, 100ms на скрытие
  delay: [100, 50],     // 100ms задержка перед показом, 50ms перед скрытием
});

Короткие анимации делают интерфейс более отзывчивым, но слишком резкие переходы могут выглядеть дергано. Оптимальный баланс — 150–250 мс для появления и 50–150 мс для скрытия.

Кастомные CSS-анимации

Для более сложных эффектов можно использовать параметр animation: 'custom' и подключить собственные классы:

tippy('.btn', {
  content: 'Подсказка',
  animation: 'custom',
  onCreate(instance) {
    instance.popper.classList.add('my-custom-animation');
  }
});

Пример CSS:

@keyframes myFadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.my-custom-animation[data-state='visible'] {
  animation: myFadeIn 200ms ease-out forwards;
}

Такой подход позволяет полностью контролировать кривую анимации, направления движения и задержки.

Аппаратное ускорение

Tippy.js автоматически использует CSS-трансформации для аппаратного ускорения (transform: translate3d), что снижает нагрузку на CPU и делает анимации плавными. Для повышения производительности:

  • избегать свойств top, left, width, height в анимациях;
  • использовать opacity и transform;
  • минимизировать количество одновременно активных тултипов.

Анимации при интерактивных подсказках

Интерактивные тултипы (interactive: true) требуют особого внимания. Длительные анимации могут мешать пользователю кликнуть внутри тултипа. Для таких элементов рекомендуется:

tippy('.interactive-btn', {
  content: 'Интерактивная подсказка',
  interactive: true,
  animation: 'fade',
  duration: [150, 50],
});

Короткое появление и быстрое скрытие обеспечивают комфортное взаимодействие.

Lazy-анимация и оптимизация рендеринга

При множестве подсказок на странице Tippy.js поддерживает ленивую инициализацию (lazy: true), что уменьшает нагрузку на DOM и ускоряет рендер:

tippy('.btn', {
  content: 'Подсказка',
  animation: 'scale',
  lazy: true
});

Тултип создается только при первом наведении, а не при инициализации всех элементов. Это особенно полезно на страницах с сотнями интерактивных элементов.

Динамическая смена анимации

Tippy.js позволяет менять анимацию на лету с помощью метода setProps:

const tip = tippy('.btn', { content: 'Подсказка' });

tip[0].setProps({
  animation: 'shift-away',
  duration: 300
});

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

Использование анимаций вместе с popperOptions

Tippy.js построен на Popper.js, и параметры позиционирования влияют на восприятие анимации. Для оптимизации:

  • избегать flip с большим количеством вариантов при короткой анимации;
  • устанавливать gpuAcceleration: true в popperOptions для плавного смещения;
  • использовать offset для мелких корректировок положения без перерасчета размеров тултипа.
tippy('.btn', {
  content: 'Подсказка',
  animation: 'shift-away',
  popperOptions: {
    modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
    strategy: 'fixed'
  }
});

Правильное сочетание анимаций и параметров Popper.js позволяет создавать быстрые и отзывчивые интерфейсы с большим количеством подсказок без потери плавности.

Оглавление