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

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

Параметр transitionOut

transitionOut определяет тип анимации, которая применяется при закрытии уведомления. Это основной способ управления визуальным эффектом исчезновения. Возможные значения:

  • "fadeOut" – плавное исчезновение с уменьшением прозрачности.
  • "fadeOutUp" – исчезновение с одновременным смещением вверх.
  • "fadeOutDown" – исчезновение с одновременным смещением вниз.
  • "flipOutX" – вращение по оси X при исчезновении.
  • "flipOutY" – вращение по оси Y при исчезновении.
  • "bounceOut" – эффект отскока при исчезновении.
  • "zoomOut" – масштабирование с уменьшением размера до нуля.

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

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление исчезнет с анимацией fadeOutUp',
    position: 'topRight',
    transitionOut: 'fadeOutUp',
    timeout: 3000
});

В этом примере уведомление плавно смещается вверх и исчезает через 3 секунды.

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

Для контроля времени анимации исчезновения применяется параметр transitionOutDuration. По умолчанию он равен 1000 мс, но его можно изменять для создания более быстрых или медленных эффектов:

iziToast.show({
    title: 'Внимание',
    message: 'Закрытие с плавным эффектом длительностью 2 секунды',
    transitionOut: 'fadeOut',
    transitionOutDuration: 2000
});

Важно учитывать, что длительность анимации не должна превышать общий timeout уведомления, иначе оно может закрыться до завершения анимации.

Взаимодействие с timeout и close

Анимация исчезновения тесно связана с параметром timeout, который задаёт время отображения уведомления. Если timeout равен 0, уведомление не закрывается автоматически, и анимация transitionOut активируется только при ручном закрытии через кнопку или метод iziToast.destroy().

Пример ручного закрытия:

const toast = iziToast.show({
    title: 'Сообщение',
    message: 'Закроется через 2 секунды после вызова destroy',
    timeout: 0,
    transitionOut: 'fadeOutDown'
});

setTimeout(() => {
    toast.destroy();
}, 2000);

Здесь уведомление исчезает с анимацией через 2 секунды после вызова метода destroy().

Пользовательские CSS-анимации

Для расширенной кастомизации можно использовать собственные CSS-анимации. В transitionOut можно передать имя класса с вашей анимацией, определённой в CSS:

@keyframes myCustomFadeOut {
    0% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(100px); }
}

.myCustomFadeOutClass {
    animation: myCustomFadeOut 1.5s forwards;
}
iziToast.show({
    title: 'Пользовательская анимация',
    message: 'Применяется CSS-анимация',
    transitionOut: 'myCustomFadeOutClass'
});

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

Комбинирование анимаций появления и исчезновения

Для создания гармоничного интерфейса рекомендуется согласовывать анимацию появления (transitionIn) с анимацией исчезновения (transitionOut). Например, уведомление, которое появляется с fadeInDown, будет органично исчезать с fadeOutUp:

iziToast.show({
    title: 'Успешно',
    message: 'Появление и исчезновение согласованы',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp'
});

Такой подход улучшает визуальное восприятие и делает интерфейс более последовательным.

Контроль поведения при наведении мыши

iziToast позволяет приостанавливать анимацию исчезновения, если пользователь наводит курсор на уведомление. Для этого используется параметр pauseOnHover (по умолчанию true). Когда пользователь наводит курсор:

  • Таймер timeout останавливается.
  • Анимация исчезновения откладывается до момента ухода курсора.
iziToast.show({
    title: 'Интерактивное уведомление',
    message: 'Анимация исчезновения приостановлена при наведении',
    pauseOnHover: true
});

Это обеспечивает более удобное взаимодействие с уведомлением, особенно если оно содержит важную информацию.

Отслеживание завершения анимации

Для выполнения действий после исчезновения уведомления можно использовать колбэк onClosing или onClosed:

  • onClosing – вызывается в момент начала анимации исчезновения.
  • onClosed – вызывается после завершения анимации.
iziToast.show({
    title: 'Закрытие уведомления',
    message: 'Будет вызван колбэк после исчезновения',
    transitionOut: 'fadeOut',
    onClosed: function(instance, toast){
        console.log('Уведомление полностью исчезло');
    }
});

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

Анимация исчезновения в iziToast является мощным инструментом для создания динамических уведомлений. Правильная настройка параметров transitionOut, transitionOutDuration, совместное использование с timeout и пользовательскими CSS-анимациями позволяет добиться плавного и визуально привлекательного закрытия уведомлений.

Оглавление