Удаление конкретного уведомления

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

Получение экземпляра уведомления

В отличие от простого вызова Toastify({...}).showToast(), для последующего удаления уведомления необходимо сохранять его экземпляр.

const toast = Toastify({
    text: "Это уведомление, которое можно удалить",
    duration: 5000, // время отображения в миллисекундах
    close: true, // отображение кнопки закрытия
    gravity: "top",
    position: "right",
}).showToast();

В переменной toast хранится объект с DOM-элементом уведомления, через который можно управлять его состоянием.

Методы удаления

1. Автоматическое скрытие через duration По умолчанию Toastify скрывает уведомление через заданное время duration. Однако иногда требуется удалять уведомление раньше, чем истечет время отображения.

2. Удаление вручную с помощью remove() Каждое уведомление, созданное через Toastify, имеет доступ к внутреннему DOM-элементу, через который можно вызвать метод remove().

// Удаление через 2 секунды после создания
setTimeout(() => {
    toast.toastElement.remove();
}, 2000);

Здесь toast.toastElement — это ссылка на DOM-элемент уведомления, а метод remove() удаляет его из DOM.

Привязка удаления к кнопке

Если требуется предоставить пользователю возможность закрыть уведомление вручную, можно использовать опцию close: true. Toastify автоматически добавляет кнопку закрытия, которая вызывает удаление уведомления из DOM.

Toastify({
    text: "Нажмите крестик, чтобы закрыть",
    close: true,
    gravity: "bottom",
    position: "left",
}).showToast();

При этом каждый клик по кнопке выполняет внутренний вызов remove() на соответствующем элементе.

Удаление по условию

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

const notifications = [];

function showTaskNotification(taskId, message) {
    const toast = Toastify({
        text: message,
        close: true,
        gravity: "top",
        position: "right",
    }).showToast();
    
    notifications.push({ taskId, toast });
}

// Удаление уведомления для конкретной задачи
function removeTaskNotification(taskId) {
    const index = notifications.findIndex(n => n.taskId === taskId);
    if (index !== -1) {
        notifications[index].toast.toastElement.remove();
        notifications.splice(index, 1);
    }
}

Использование массива объектов с taskId позволяет целенаправленно управлять отдельными уведомлениями, не затрагивая остальные.

Анимации при удалении

Toastify поддерживает плавное исчезновение уведомлений через CSS-переходы. При ручном вызове remove() можно добавить анимацию, чтобы уведомление исчезало постепенно:

.toastify-remove {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
function removeWithAnimation(toast) {
    toast.toastElement.classList.add("toastify-remove");
    setTimeout(() => {
        toast.toastElement.remove();
    }, 500); // соответствует времени CSS transition
}

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

Важные моменты

  • Хранение экземпляров — без ссылки на объект уведомления удаление невозможно, если требуется программная манипуляция.
  • Использование close: true — упрощает ручное удаление через кнопку пользователя.
  • Массив уведомлений — полезен для управления множественными уведомлениями одновременно.
  • Анимации — повышают качество UX при удалении уведомлений.

Удаление конкретного уведомления в Toastify — это сочетание сохранения экземпляра, прямого управления DOM и опциональной анимации, что обеспечивает гибкость и контроль над интерфейсом.

Оглавление