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

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

Время отображения уведомления

Основным способом управления временем появления уведомления является параметр duration. Он задаёт продолжительность отображения тоста в миллисекундах.

Toastify({
  text: "Операция выполнена успешно",
  duration: 3000 // уведомление исчезнет через 3 секунды
}).showToast();

Особенности:

  • Значение 0 делает уведомление постоянным до явного закрытия.
  • Любое положительное число указывает длительность в миллисекундах.
  • Отсутствие параметра устанавливает значение по умолчанию, обычно 3000 мс.

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

Автоматическое закрытие управляется флагом close. Он добавляет кнопку закрытия и позволяет автоматически скрывать уведомление.

Toastify({
  text: "Новая версия доступна",
  duration: 5000,
  close: true // добавляет крестик для ручного закрытия
}).showToast();

Моменты, которые важно учитывать:

  • При установке close: true пользователь может закрыть уведомление досрочно.
  • Если duration установлено в 0, уведомление останется на экране, пока не будет закрыто вручную.

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

Иногда требуется закрывать уведомления программно. Для этого Toastify возвращает объект с методом hideToast().

const toast = Toastify({
  text: "Данные успешно сохранены",
  duration: 5000
});

toast.showToast();

// закрытие уведомления через 2 секунды
setTimeout(() => {
  toast.hideToast();
}, 2000);

Особенности метода hideToast():

  • Мгновенно скрывает уведомление.
  • Можно вызывать несколько раз без ошибок.
  • Полезно для уведомлений, зависящих от асинхронных событий.

Остановка таймера при наведении

Для повышения удобства взаимодействия часто требуется, чтобы уведомление не закрывалось, пока пользователь наводит курсор. Toastify предоставляет параметр stopOnFocus.

Toastify({
  text: "Загрузка данных...",
  duration: 4000,
  stopOnFocus: true
}).showToast();

Принцип работы:

  • При наведении курсора на тост, таймер отсрочивает закрытие.
  • При убирании курсора таймер продолжает обратный отсчет.
  • Работает совместно с duration, не влияет на ручное закрытие через close.

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

В сложных приложениях может потребоваться закрывать уведомления только при определённых условиях. Это достигается сочетанием событий и метода hideToast().

const toast = Toastify({
  text: "Проверка данных...",
  duration: 0
}).showToast();

fetch("/api/check")
  .then(response => response.json())
  .then(data => {
    if (data.valid) {
      toast.hideToast(); // закрываем только если условие выполнено
    }
  });

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

  • duration: 0 делает уведомление постоянным до выполнения условия.
  • Можно комбинировать с кастомными стилями для визуальной индикации статуса.

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

Toastify поддерживает плавное скрытие уведомлений через CSS-анимации. По умолчанию используется простая анимация исчезания, но её можно кастомизировать через className и стили:

Toastify({
  text: "Обновление завершено",
  duration: 3000,
  className: "fade-out-toast"
}).showToast();
.fade-out-toast {
  transition: opacity 0.5s ease-out;
}
.fade-out-toast.toastify-hide {
  opacity: 0;
}

Рекомендации:

  • Анимации делают интерфейс более плавным и приятным.
  • Можно управлять как скоростью закрытия, так и типом эффекта (например, slide, fade).

Советы по управлению закрытием

  1. Не перегружать пользователя: уведомления должны появляться ненадолго, кроме критических сообщений.
  2. Использовать ручное закрытие для важных тостов: если уведомление несёт долгосрочную информацию, добавление кнопки close предотвращает потерю данных.
  3. Комбинировать stopOnFocus и duration: удобно для инструкций и предупреждений, чтобы пользователь успел прочитать текст.
  4. Программное закрытие для динамических событий: полезно при асинхронных операциях или изменении состояния приложения.

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

Оглавление