Анимация появления и скрытия

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

Настройка анимации появления

По умолчанию подсказки Intro.js используют простую анимацию появления через плавное изменение прозрачности и сдвиг по вертикали. Основные способы управления:

  1. Опции при инициализации:

    introJs().setOptions({
    showStepNumbers: true,
    tooltipClass: 'customTooltip',
    highlightClass: 'customHighlight',
    exitOnOverlayClick: false
}).start();
    • tooltipClass — позволяет задать собственный CSS-класс, где можно прописать анимацию появления.
    • highlightClass — класс для подсветки элемента, который также можно анимировать.

  2. Кастомные CSS-анимации: Появление подсказки можно настроить через ключевые кадры:

    .customTooltip {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
}

.customTooltip.introjs-show {
    opacity: 1;
    transform: translateY(0);
}

    Здесь используется класс .introjs-show, который добавляется Intro.js при показе шага.

  3. Использование событий Intro.js: События onbeforechange и onafterchange позволяют запускать анимацию вручную:

    introJs().onbeforechange(function(targetElement) {
    const tooltip = document.querySelector('.introjs-tooltip');
    tooltip.style.opacity = 0;
    tooltip.style.transform = 'translateY(-10px)';
}).onafterchange(function(targetElement) {
    const tooltip = document.querySelector('.introjs-tooltip');
    setTimeout(() => {
        tooltip.style.opacity = 1;
        tooltip.style.transform = 'translateY(0)';
    }, 50);
}).start();

Анимация скрытия подсказки

Скрытие шагов также можно настраивать через CSS и события:

  1. Плавное исчезновение через CSS:

    .customTooltip.introjs-hide {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}
    • Класс .introjs-hide добавляется при закрытии подсказки.
    • Параметры transition и transform обеспечивают плавность исчезновения.

  2. События для анимации скрытия:

    introJs().onbeforeexit(function() {
    const tooltip = document.querySelector('.introjs-tooltip');
    tooltip.classList.add('introjs-hide');
    return new Promise(resolve => {
        setTimeout(resolve, 300); // ждем окончания анимации
    });
}).start();

    Этот подход позволяет завершать скрытие только после окончания CSS-анимации.

Продвинутые эффекты

Intro.js поддерживает комбинации анимаций для подсказки и подсветки одновременно:

  • Всплывающие подсказки с масштабированием:

    .customTooltip {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.customTooltip.introjs-show {
    opacity: 1;
    transform: scale(1);
}

  • Подсветка элемента с пульсацией:

    .customHighlight {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

  • Комбинация появления с затуханием фона: Для затемнения области вне текущего шага можно анимировать overlay:

    .introjs-overlay {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.introjs-overlay.introjs-show {
    opacity: 0.7;
}

Управление временными задержками

Для более естественного восприятия можно добавлять задержку перед показом или скрытием:

introJs().onafterchange(function() {
    const tooltip = document.querySelector('.introjs-tooltip');
    tooltip.style.transitionDelay = '0.2s';
});
  • transition-delay позволяет добиться эффекта «мягкого входа» подсказки.
  • Аналогично можно использовать setTimeout для синхронизации сложных анимаций.

Интеграция с внешними библиотеками анимации

Intro.js легко сочетается с GSAP, Anime.js или другими библиотеками:

introJs().onafterchange(function(targetElement) {
    gsap.fromTo('.introjs-tooltip', 
        { opacity: 0, y: -20 }, 
        { opacity: 1, y: 0, duration: 0.5 }
    );
}).start();

Такой подход открывает возможность создавать более сложные эффекты, например, вращение, масштабирование и перекрестные анимации подсказки и highlight одновременно.

Советы по оптимизации анимаций

  • Использовать will-change: transform, opacity для повышения производительности.
  • Не перегружать анимации одновременно множеством свойств.
  • Для мобильных устройств сокращать длительность анимаций до 200–300 мс.
  • Тестировать анимации на всех популярных браузерах для консистентного поведения.

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

Оглавление