Анимация исчезновения

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

Параметр animation

animation — ключевой параметр, отвечающий за визуальный эффект тултипа при его показе и скрытии. Tooltipster поддерживает несколько предустановленных типов анимации:

  • fade — плавное исчезновение с постепенным изменением прозрачности.
  • grow — тултип уменьшается и исчезает, создавая эффект схлопывания.
  • swing — комбинированное вращение и изменение масштаба.
  • slide — тултип скользит в направлении появления или исчезновения.
$('.tooltip').tooltipster({
    animation: 'fade',
    animationDuration: 400
});

В примере указано плавное исчезновение тултипа с длительностью 400 мс. animationDuration задаёт продолжительность как появления, так и скрытия тултипа.

Настройка отдельной длительности для исчезновения

Tooltipster версии 4 и выше позволяет задавать раздельные тайминги для появления и скрытия тултипа через объект animationDuration:

$('.tooltip').tooltipster({
    animation: 'grow',
    animationDuration: {
        open: 500,
        close: 300
    }
});
  • open — длительность анимации при показе тултипа.
  • close — длительность анимации при скрытии тултипа.

Это особенно полезно, когда необходимо сделать появление более заметным, а исчезновение — быстрым.

Использование пользовательских анимаций через CSS

Tooltipster позволяет полностью кастомизировать анимации, подключая собственные CSS-классы. Для этого используется параметр functionReady и переопределение анимации через CSS:

$('.tooltip').tooltipster({
    animation: 'custom',
    functionReady: function(instance, helper){
        $(helper.tooltip).addClass('my-fade-in');
    },
    functionBefore: function(instance, helper){
        $(helper.tooltip).removeClass('my-fade-out');
    },
    functionAfter: function(instance, helper){
        $(helper.tooltip).addClass('my-fade-out');
    }
});
.my-fade-in {
    opacity: 1;
    transition: opacity 0.6s ease-in;
}
.my-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
  • functionReady вызывается после того, как тултип создан, и позволяет добавить класс для анимации появления.
  • functionBefore выполняется перед показом тултипа, что позволяет подготовить элементы.
  • functionAfter срабатывает после скрытия тултипа, что идеально подходит для анимации исчезновения.

События для управления исчезновением

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

  • onBeforeClose — срабатывает до начала анимации закрытия, можно использовать для отмены закрытия или запуска кастомной анимации.
  • onClose — событие после завершения закрытия тултипа, полезно для очистки динамического контента.

Пример:

$('.tooltip').tooltipster({
    animation: 'fade',
    animationDuration: 400,
    functionBefore: function(instance, helper){
        console.log('Тултип готов к исчезновению');
    },
    functionAfter: function(instance, helper){
        console.log('Тултип полностью скрыт');
    }
});

Контроль через программное закрытие

Метод close() позволяет инициировать анимацию исчезновения вручную:

var instance = $('.tooltip').tooltipster().tooltipster('instance');
instance.close();

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

Важные рекомендации

  • Не использовать слишком длинные анимации для исчезновения, иначе пользовательский интерфейс может казаться заторможенным.
  • Согласовывать стили CSS и JS-параметры, чтобы анимация не конфликтовала с предустановленной библиотекой.
  • Проверять работу на разных устройствах, так как плавность анимации может различаться на слабых мобильных устройствах.
  • Для динамического контента обязательно использовать события functionAfter для очистки DOM после скрытия тултипа.

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

Оглавление