onOpened

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

Синтаксис

iziToast.show({
    title: 'Успешно!',
    message: 'Данные сохранены',
    onOpened: function(instance, toast){
        console.log('Уведомление открыто');
    }
});
  • instance — объект iziToast, через который можно получить доступ к текущему toast и методам библиотеки.
  • toast — DOM-элемент конкретного уведомления, что позволяет работать с его стилями или классами напрямую.

Отличие от других событий

iziToast предоставляет несколько событий, таких как:

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

Основное отличие onOpened заключается в том, что оно гарантирует полное отображение уведомления на экране. В отличие от onOpening, здесь можно быть уверенным, что все CSS-анимации завершены, а DOM полностью готов для взаимодействия.

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

Логирование при открытии

iziToast.show({
    title: 'Информация',
    message: 'Сообщение отображено',
    onOpened: function(instance, toast){
        console.log('Toast открыт: ', toast);
    }
});

В этом примере выводится объект DOM-элемента уведомления в консоль. Это полезно для отладки или анализа поведения уведомлений на странице.

Анимация элементов при открытии toast

iziToast.show({
    title: 'Внимание!',
    message: 'Начинается анимация',
    onOpened: function(instance, toast){
        const element = document.querySelector('.animated-box');
        element.classList.add('start-animation');
    }
});

Коллбэк onOpened используется для запуска CSS-анимации другого элемента на странице сразу после того, как toast полностью открылся. Это обеспечивает синхронизацию действий и визуальных эффектов.

Работа с DOM toast-элемента

iziToast.show({
    title: 'Пользователь',
    message: 'Изменим стиль toast',
    onOpened: function(instance, toast){
        toast.style.backgroundColor = '#4caf50';
        toast.style.color = '#ffffff';
    }
});

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

Советы по использованию

  1. Не использовать для тяжелых вычислений — выполнение сложных операций в onOpened может замедлить интерфейс, так как событие срабатывает сразу после анимации.
  2. Синхронизация с анимациями — идеально подходит для запуска параллельных эффектов на странице, обеспечивая плавное визуальное восприятие.
  3. Отслеживание аналитики — удобно для отправки событий в системы аналитики, например, фиксировать, что пользователь видел уведомление.
  4. Работа с динамическим содержимым — можно добавлять элементы или изменять содержимое toast уже после его полной отрисовки.

Совместное использование с другими событиями

iziToast.show({
    title: 'События iziToast',
    message: 'Тестируем открытие и закрытие',
    onOpening: function(){ console.log('Начало открытия'); },
    onOpened: function(){ console.log('Уведомление открыто'); },
    onClosing: function(){ console.log('Начало закрытия'); },
    onClosed: function(){ console.log('Уведомление закрыто'); }
});

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

Ключевые моменты

  • onOpened срабатывает один раз после завершения анимации открытия.
  • Получает два аргумента: instance и toast.
  • Используется для: анимации элементов, изменения стилей, логирования, аналитики.
  • Отличается от onOpening тем, что DOM toast полностью готов для взаимодействия.

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

Оглавление