onOpening

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

Синтаксис

iziToast.show({
    title: 'Пример',
    message: 'Уведомление с onOpening',
    onOpening: function(instance, toast){
        // Действия при начале открытия уведомления
    }
});

Параметры функции onOpening:

  • instance – объект текущей инстанции iziToast. Через него можно управлять поведением всех уведомлений: закрывать их, изменять параметры, обращаться к методам библиотеки.
  • toast – DOM-элемент уведомления, который только что создаётся. Через него можно добавить кастомные атрибуты, классы, слушатели событий или управлять стилями.

Основные возможности использования

  1. Изменение внешнего вида уведомления перед показом Можно динамически добавлять CSS-классы, изменять цвет фона или шрифта:
iziToast.show({
    title: 'Внимание',
    message: 'Уведомление с кастомным стилем',
    onOpening: function(instance, toast){
        toast.style.backgroundColor = '#2ecc71';
        toast.style.color = '#ffffff';
    }
});
  1. Логирование или аналитика Событие срабатывает до появления уведомления, поэтому его удобно использовать для статистики:
iziToast.show({
    title: 'Статистика',
    message: 'Отправка события открытия',
    onOpening: function(instance, toast){
        console.log('Уведомление готово к показу:', toast);
        // Можно отправить данные на сервер
        // fetch('/api/log', { method: 'POST', body: JSON.stringify({ type: 'open' }) });
    }
});
  1. Добавление анимаций или переходов вручную Несмотря на встроенные анимации iziToast, onOpening позволяет применить свои эффекты через CSS или Jav * aScript:
iziToast.show({
    title: 'Анимация',
    message: 'Появление с кастомным эффектом',
    onOpening: function(instance, toast){
        toast.style.transform = 'scale(0)';
        setTimeout(() => {
            toast.style.transition = 'transform 0.3s ease';
            toast.style.transform = 'scale(1)';
        }, 10);
    }
});
  1. Манипуляция с содержимым уведомления Можно динамически изменять текст, добавлять HTML или элементы перед показом:
iziToast.show({
    title: 'Динамика',
    message: 'Изначальный текст',
    onOpening: function(instance, toast){
        toast.querySelector('.iziToast-message').innerHTML = 'Обновлённый текст уведомления';
    }
});

Отличие onOpening от onOpeningStart и onOpened

  • onOpening – вызывается перед началом анимации показа, можно изменять DOM и свойства уведомления.
  • onOpened – вызывается после завершения анимации показа, уведомление уже полностью видно пользователю.
  • onOpeningStart – фактически устаревший и менее используемый хук; современная практика предполагает применение onOpening.

Примеры практического применения

  1. Подсветка уведомления при появлении
iziToast.show({
    title: 'Новое сообщение',
    message: 'Обнаружено новое событие',
    onOpening: function(instance, toast){
        toast.style.boxShadow = '0 0 10px 2px #f1c40f';
    }
});
  1. Скрытие уведомления при определённом условии
iziToast.show({
    title: 'Проверка',
    message: 'Может быть скрыто',
    onOpening: function(instance, toast){
        if (Math.random() > 0.5) {
            instance.hide({ target: toast });
        }
    }
});
  1. Динамическое присвоение ID
iziToast.show({
    title: 'ID уведомления',
    message: 'Присвоение уникального идентификатора',
    onOpening: function(instance, toast){
        toast.id = 'toast-' + Date.now();
    }
});

Рекомендации по использованию

  • Использовать onOpening для действий, которые не должны блокировать анимацию, так как она запускается сразу после выполнения кода хука.
  • Изменения DOM, добавление классов или inline-стилей стоит делать минимально, чтобы не нарушить стандартные анимации iziToast.
  • Для отправки аналитики лучше использовать fetch или navigator.sendBeacon внутри onOpening, чтобы не задерживать появление уведомления.

Событие onOpening является мощным инструментом для гибкой кастомизации уведомлений: оно открывает доступ к DOM до визуального показа и позволяет выполнять любые подготовительные действия, сохраняя плавность анимации и интерактивность уведомлений.

Оглавление