Программное закрытие уведомлений

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

Методы закрытия уведомлений

В iziToast существует несколько подходов для закрытия уведомлений программно:

  1. Закрытие всех уведомлений
iziToast.destroy();

Метод destroy() полностью очищает все текущие уведомления на странице, мгновенно удаляя их из DOM. Это удобно, если требуется сбросить все уведомления перед показом нового или при изменении состояния приложения.

  1. Закрытие уведомления по ID

Каждое уведомление в iziToast можно идентифицировать с помощью уникального id. При создании уведомления можно явно задать идентификатор:

iziToast.show({
    id: 'customToast',
    title: 'Внимание',
    message: 'Это уведомление можно закрыть программно',
    position: 'topRight'
});

Закрыть уведомление по ID можно с помощью:

iziToast.hide({}, 'customToast');

Параметры метода hide:

  • Первый объект — это опции анимации закрытия (transitionOut, timeout, onClosing, onClosed).
  • Второй параметр — id уведомления, которое нужно закрыть.

Если id не указан, метод не будет воздействовать на конкретное уведомление.

  1. Автоматическое закрытие уведомления через заданное время

Помимо встроенного параметра timeout, можно закрыть уведомление программно через любой произвольный таймер:

const toastId = 'delayedToast';

iziToast.show({
    id: toastId,
    title: 'Информация',
    message: 'Уведомление закроется через 5 секунд по скрипту',
    position: 'topRight',
    timeout: false
});

setTimeout(() => {
    iziToast.hide({}, toastId);
}, 5000);

В данном примере уведомление не имеет автоматического тайм-аута (timeout: false), а закрытие полностью контролируется скриптом.

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

Метод hide поддерживает различные эффекты анимации, которые задаются через параметр transitionOut. Доступные варианты:

  • 'fadeOut' — плавное исчезновение
  • 'fadeOutUp' — исчезновение с движением вверх
  • 'fadeOutDown' — исчезновение с движением вниз
  • 'flipOutX' — вращение по оси X
  • 'flipOutY' — вращение по оси Y

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

iziToast.hide({
    transitionOut: 'fadeOutUp',
    timeout: 300
}, 'customToast');

Здесь уведомление исчезнет с эффектом движения вверх, а анимация продлится 300 мс.

Использование колбэков при закрытии

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

  • onClosing — вызывается в момент начала закрытия уведомления.
  • onClosed — вызывается после полного удаления уведомления из DOM.

Пример:

iziToast.hide({
    onClosing: function(instance, toast, closedBy){
        console.log('Начало закрытия:', closedBy);
    },
    onClosed: function(instance, toast, closedBy){
        console.log('Уведомление полностью закрыто:', closedBy);
    }
}, 'customToast');

Параметр closedBy показывает причину закрытия: "timeout", "button", "manual", "overlay" и др. Для программного закрытия чаще всего будет "manual".

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

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

  • Очищать старые уведомления при смене страницы или компонента.
  • Закрывать уведомления после завершения API-запросов.
  • Интегрировать уведомления с событиями пользовательского интерфейса, например, закрытие при клике на кнопку в модальном окне.
function showApiNotification() {
    const toastId = 'apiToast';
    
    iziToast.show({
        id: toastId,
        title: 'Загрузка',
        message: 'Ожидание ответа сервера...',
        position: 'bottomLeft',
        timeout: false
    });
    
    fetch('/api/data')
        .then(response => response.json())
        .finally(() => {
            iziToast.hide({}, toastId);
        });
}

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

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

Оглавление