Управление переходами

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

Свойство animation

animation определяет тип анимации появления и исчезновения тултипа. Tippy.js поддерживает несколько встроенных вариантов:

tippy('#myButton', {
  content: 'Пример подсказки',
  animation: 'fade', // встроенные варианты: 'fade', 'scale', 'shift-away', 'shift-toward'
});
  • fade – плавное появление с постепенным изменением прозрачности.
  • scale – масштабирование тултипа от центра.
  • shift-away – смещение от курсора или элемента.
  • shift-toward – смещение к элементу.

Можно также задать кастомную анимацию через CSS. Для этого используется свойство animateFill и классы CSS с ключевыми кадрами.

tippy('#myButton', {
  content: 'Кастомная анимация',
  animation: 'custom',
  animateFill: true, // фон анимируется отдельно
});
.tippy-box[data-animation='custom'][data-state='visible'] {
  animation: myFadeIn 0.3s ease-out forwards;
}

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

Свойство duration

duration управляет временем анимации в миллисекундах. Можно задать одинаковое время для появления и исчезновения или указать массив [show, hide]:

tippy('#myButton', {
  content: 'Длительность анимации',
  animation: 'scale',
  duration: [300, 500], // 300ms на появление, 500ms на скрытие
});
  • Число – одинаковая длительность для показа и скрытия.
  • Массив – [показ, скрытие] для гибкой настройки.

Свойство delay

delay контролирует задержку перед показом или скрытием тултипа:

tippy('#myButton', {
  content: 'Задержка',
  delay: [100, 200], // 100ms перед показом, 200ms перед скрытием
});
  • Позволяет предотвратить «мигание» подсказки при быстром движении курсора.
  • Может быть использовано совместно с duration для создания сложных анимационных эффектов.

Свойство easing

easing задает кривую ускорения анимации:

tippy('#myButton', {
  content: 'Плавная анимация',
  animation: 'shift-away',
  duration: 400,
  easing: 'ease-out-back', // поддерживаются любые CSS кривые
});
  • Позволяет создавать реалистичные физические эффекты (замедление, ускорение).
  • Поддерживаются стандартные CSS-функции: linear, ease, ease-in, ease-out, cubic-bezier(...).

Свойство interactive

При использовании интерактивных тултипов, важно учитывать задержку и анимацию, чтобы подсказка не исчезала при наведении курсора на сам тултип:

tippy('#myButton', {
  content: 'Интерактивная подсказка',
  interactive: true,
  delay: [0, 300],
});
  • interactive: true предотвращает мгновенное закрытие.
  • Задержка на скрытие позволяет пользователю взаимодействовать с содержимым тултипа.

Управление анимацией через хуки

Tippy.js предоставляет хуки жизненного цикла, которые позволяют запускать кастомные анимации с помощью Jav * aScript:

tippy('#myButton', {
  content: 'Кастомный переход',
  onShow(instance) {
    instance.popper.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
    instance.popper.style.transform = 'scale(1)';
    instance.popper.style.opacity = '1';
  },
  onHide(instance) {
    instance.popper.style.transform = 'scale(0.8)';
    instance.popper.style.opacity = '0';
  }
});
  • Позволяет реализовать нестандартные эффекты, например, с вращением или смещением.
  • Можно комбинировать с CSS-анимациями для повышения производительности.

Свойство animateFill

animateFill управляет анимацией фона тултипа отдельно от содержимого:

tippy('#myButton', {
  content: 'Анимация фона',
  animation: 'scale',
  animateFill: true
});
  • Полезно при создании подсказок с цветными фонами и плавным переходом.
  • При animateFill: false фон появляется мгновенно, только содержимое анимируется.

Комбинация свойств для сложных эффектов

Для создания уникальных анимационных эффектов используется комбинация animation, duration, delay, easing и interactive:

tippy('#myButton', {
  content: 'Сложный переход',
  animation: 'shift-away',
  duration: [250, 500],
  delay: [100, 200],
  easing: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
  interactive: true,
  animateFill: true
});
  • Позволяет управлять временем, кривой ускорения, задержкой и интерактивностью одновременно.
  • Применимо для сложных пользовательских интерфейсов с множеством тултипов.

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

Оглавление