Встроенные анимации

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

Типы встроенных анимаций

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

  1. fade Наиболее универсальная анимация, которая изменяет прозрачность подсказки от 0 до 1 при появлении и наоборот при скрытии. Используется для плавного исчезновения элементов без смещения.

  2. scale Комбинация изменения прозрачности и масштаба. Подсказка постепенно увеличивается от миниатюрного состояния (scale 0.9) до нормального размера (scale 1). Создает эффект «вырастания» подсказки.

  3. shift-toward Анимация смещения, где подсказка появляется с небольшим смещением в сторону целевого элемента. Обеспечивает визуальное направление движения и помогает подчеркнуть связь с элементом.

  4. shift-away Противоположная предыдущей анимация: подсказка смещается от целевого элемента, создавая эффект «выскальзывания» при закрытии.

  5. scale-extreme Более резкий вариант анимации масштабирования с большей динамикой. Полезна для интерактивных элементов, где требуется заметное появление подсказки.

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

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

Для применения анимации используется параметр animation при инициализации Tippy:

tippy('#button', {
  content: 'Пример подсказки',
  animation: 'scale', // встроенная анимация
  duration: [300, 200] // продолжительность [появления, скрытия] в миллисекундах
});
  • animation – название встроенной анимации (fade, scale, shift-toward и др.).
  • duration – массив, где первый элемент задает скорость появления, второй – скорость скрытия. Можно указать одно значение, тогда оно применяется для обеих фаз.

Продвинутая настройка анимаций

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

tippy('#button', {
  content: 'Кастомная анимация',
  animation: 'shift-toward',
  duration: 400,
  onShow(instance) {
    instance.popper.style.transform += ' rotateZ(5deg)';
  }
});
  • onShow / onHide – хуки, которые позволяют добавлять дополнительные эффекты при появлении и исчезновении подсказки.
  • popper.style – прямое управление стилями подсказки, включая трансформации, прозрачность и смещение.

Сочетание нескольких анимаций

Встроенные анимации можно комбинировать с пользовательскими CSS-классами для создания уникальных эффектов. Пример с применением CSS-класса:

.custom-tippy-animation {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.custom-tippy-animation[data-state='visible'] {
  transform: scale(1.1);
  opacity: 1;
}
.custom-tippy-animation[data-state='hidden'] {
  transform: scale(0.9);
  opacity: 0;
}
tippy('#button', {
  content: 'Комбинированная анимация',
  animation: 'fade',
  duration: 300,
  popperClass: 'custom-tippy-animation'
});
  • popperClass – позволяет добавлять свои CSS-классы к подсказке.
  • data-state – атрибут, автоматически присваиваемый Tippy, используется для определения состояния подсказки и применения соответствующих стилей.

Параметры плавности и задержки

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

  • delay – задержка перед показом или скрытием подсказки:
tippy('#button', {
  content: 'Подсказка с задержкой',
  delay: [500, 100] // [появление, скрытие]
});
  • duration – скорость анимации, как обсуждалось ранее.
  • easing – тип кривой плавности анимации (например, ease, ease-in-out, linear), который можно задать через CSS:
.tippy-box {
  transition-timing-function: ease-in-out;
}

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

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

const tip = tippy('#button', { content: 'Смена анимации', animation: 'fade' });

// через некоторое время меняем анимацию
tip.setProps({ animation: 'scale' });

Это особенно полезно для интерфейсов с изменяющимися условиями отображения подсказок.

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

Оглавление