Параметры длительности

В Tippy.js управление временем анимации и отображения всплывающих подсказок осуществляется с помощью параметров длительности (duration). Эти параметры определяют скорость появления и скрытия тултипа и могут быть настроены как единым значением, так и отдельно для появления и скрытия.

Синтаксис параметра duration

Параметр duration может быть задан в двух формах:

  1. Число — применяется одинаковое время для появления и скрытия:
tippy('#button', {
  content: 'Пример подсказки',
  duration: 500 // 500 мс на появление и скрытие
});
  1. Объект — позволяет задать разные значения для появления (show) и скрытия (hide):
tippy('#button', {
  content: 'Пример подсказки',
  duration: { show: 300, hide: 600 } // 300 мс на появление, 600 мс на скрытие
});

Важно: Tippy.js использует миллисекунды. Если значение не указано, применяется стандартная длительность анимации по умолчанию (обычно 350 мс).

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

Параметр duration тесно связан с параметром animation, который задает тип анимации:

tippy('#button', {
  content: 'Пример подсказки',
  animation: 'scale', // доступные значения: 'fade', 'scale', 'shift-away', 'shift-toward'
  duration: { show: 200, hide: 500 }
});
  • Для fade длительность определяет скорость прозрачности.
  • Для scale длительность влияет на увеличение/уменьшение размера тултипа.
  • Для shift длительность задаёт скорость смещения тултипа.

Динамическая смена длительности

Можно изменять длительность на лету через метод setProps:

const tip = tippy('#button', {
  content: 'Динамическая подсказка'
});

tip.setProps({ duration: { show: 100, hide: 400 } });

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

Связь с параметром delay

duration часто комбинируется с delay, который задаёт время до появления и скрытия тултипа. Различие:

  • delay — когда начнется анимация.
  • duration — как долго будет длиться анимация.

Пример использования вместе:

tippy('#button', {
  content: 'Комбинация delay и duration',
  delay: [500, 200], // 500 мс перед показом, 200 мс перед скрытием
  duration: { show: 400, hide: 300 } // анимация появления и скрытия
});

Адаптивные длительности

Можно использовать функцию для динамического определения длительности в зависимости от состояния:

tippy('#button', {
  content: 'Адаптивная длительность',
  duration: (instance) => {
    if (instance.state.isVisible) {
      return 300; // при скрытии быстрее
    } else {
      return 700; // при показе медленнее
    }
  }
});

Функция принимает объект instance с текущим состоянием тултипа (isVisible, reference и т.д.) и возвращает число или объект { show, hide }.

Поддержка кастомных CSS анимаций

Если используются кастомные анимации через CSS, параметр duration должен соответствовать длительности анимации в CSS:

@keyframes customFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tippy-box[data-animation~='custom'] {
  animation: customFade 0.6s forwards;
}
tippy('#button', {
  content: 'Кастомная анимация',
  animation: 'custom',
  duration: 600 // совпадает с CSS
});

Несоответствие между duration и CSS-анимацией может привести к обрыву анимации или некорректному скрытию тултипа.

Резюме по длительности

  • duration задаётся числом или объектом { show, hide }.
  • Влияет исключительно на скорость анимации появления/скрытия.
  • Совместим с параметрами animation и delay.
  • Может быть статическим, динамическим (функцией) или согласованным с CSS-анимациями.
  • Разделение на show и hide позволяет создавать более сложные визуальные эффекты.

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

Оглавление