Плагин animateFill

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

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

Подключение плагина

Для использования animateFill необходимо явно подключить плагин и соответствующие стили.

import tippy, { animateFill } from 'tippy.js';
import 'tippy.js/dist/tippy.css';
import 'tippy.js/dist/backdrop.css';
import 'tippy.js/animations/shift-away.css';

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

  • backdrop.css отвечает за дополнительный слой (backdrop), который используется для анимации заливки
  • анимация (shift-away, scale, и др.) может быть выбрана отдельно

Базовое использование

tippy('.btn', {
  content: 'Подсказка',
  animateFill: true,
  plugins: [animateFill],
});

Обязательные параметры:

  • animateFill: true — включает эффект
  • plugins: [animateFill] — регистрирует плагин

Без подключения плагина параметр не будет работать.

Принцип работы

При активации animateFill внутри тултипа создаётся дополнительный элемент — backdrop. Он располагается под основным контентом и анимируется независимо.

Структура DOM:

<div class="tippy-box" data-animatefill>
  <div class="tippy-backdrop"></div>
  <div class="tippy-content">...</div>
</div>

Анимация происходит за счёт изменения масштаба и формы backdrop-элемента.

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

Плагин тесно связан с параметром animation. Он не заменяет стандартные анимации, а дополняет их.

Пример:

tippy('.btn', {
  content: 'Анимация',
  animateFill: true,
  animation: 'shift-away',
  plugins: [animateFill],
});

Популярные варианты:

  • shift-away
  • shift-toward
  • scale
  • perspective

Важно: визуальный результат зависит от комбинации animation + animateFill.

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

tippy('.btn', {
  content: 'Длительность',
  animateFill: true,
  duration: [500, 300],
  plugins: [animateFill],
});
  • первое значение — появление
  • второе — скрытие

При использовании animateFill увеличение времени появления делает эффект заливки более заметным.

Управление цветом заливки

Цвет backdrop наследует фон тултипа, но может быть изменён через CSS:

.tippy-box[data-theme~='custom'][data-animatefill] .tippy-backdrop {
  background-color: #4a90e2;
}

Пример с темой:

tippy('.btn', {
  content: 'Цветная заливка',
  theme: 'custom',
  animateFill: true,
  plugins: [animateFill],
});

Работа с темами

animateFill особенно хорошо сочетается с кастомными темами.

.tippy-box[data-theme~='dark'] {
  background-color: #333;
  color: #fff;
}

.tippy-box[data-theme~='dark'][data-animatefill] .tippy-backdrop {
  background-color: #333;
}

Важно синхронизировать:

  • фон тултипа
  • цвет backdrop

Иначе при анимации возможен «разрыв» визуального эффекта.

Производительность

animateFill добавляет дополнительный DOM-элемент и CSS-анимации, что может влиять на производительность при большом количестве тултипов.

Рекомендации:

  • избегать массового применения на сотнях элементов
  • использовать делегирование (tippy.delegate)
  • минимизировать сложные тени и градиенты

Ограничения

  • требует подключения backdrop.css
  • не работает без явной регистрации плагина
  • может конфликтовать с кастомными CSS-анимациями
  • менее заметен при очень коротких duration

Комбинирование с другими плагинами

animateFill можно использовать вместе с другими плагинами:

import tippy, { animateFill, followCursor } from 'tippy.js';

tippy('.btn', {
  content: 'Комбинация',
  animateFill: true,
  followCursor: true,
  plugins: [animateFill, followCursor],
});

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

  • порядок плагинов значения не имеет
  • визуальные эффекты могут накладываться

Расширенная кастомизация через CSS

Можно полностью изменить поведение анимации:

.tippy-backdrop {
  transition: transform 0.6s ease-out, opacity 0.6s;
  transform: scale(0);
}

.tippy-box[data-state='visible'] .tippy-backdrop {
  transform: scale(1);
}

Таким образом создаются:

  • плавные заливки
  • «взрывные» эффекты
  • нестандартные формы

Практические сценарии использования

Интерактивные интерфейсы

  • подсказки к кнопкам с акцентом на действие

Обучающие интерфейсы

  • выделение подсказок как элементов обучения

UI с высокой визуальной насыщенностью

  • панели управления
  • дашборды

Частые ошибки

1. Плагин не работает Причина:

plugins: []

Решение:

plugins: [animateFill]

2. Нет эффекта заливки Причина — не подключён backdrop.css

3. Некорректный цвет Причина — несоответствие темы и backdrop

Минимальный рабочий пример

<button class="btn">Наведи</button>
import tippy, { animateFill } from 'tippy.js';
import 'tippy.js/dist/tippy.css';
import 'tippy.js/dist/backdrop.css';
import 'tippy.js/animations/scale.css';

tippy('.btn', {
  content: 'Пример animateFill',
  animateFill: true,
  animation: 'scale',
  duration: 400,
  plugins: [animateFill],
});

Взаимодействие с состояниями

animateFill реагирует на стандартные состояния Tippy:

  • visible
  • hidden

CSS-селекторы:

.tippy-box[data-state='visible'] .tippy-backdrop { ... }
.tippy-box[data-state='hidden'] .tippy-backdrop { ... }

Это позволяет тонко контролировать:

  • момент старта анимации
  • поведение при скрытии

Особенности мобильных устройств

На мобильных устройствах:

  • анимации могут быть менее плавными
  • рекомендуется увеличивать duration
  • избегать сложных CSS-эффектов

Итоговая архитектура

animateFill добавляет:

  • дополнительный слой (backdrop)
  • синхронизацию с основной анимацией
  • возможность глубокой кастомизации через CSS

За счёт этого достигается эффект «живого» интерфейса без усложнения логики JavaScript.

Оглавление