onShow

Событие onShow является одним из ключевых жизненных циклов уведомлений в библиотеке Noty. Оно срабатывает в момент, когда уведомление начинает отображаться на странице, но ещё не завершилось его появление полностью. Это событие позволяет выполнять действия синхронно с показом уведомления, например, запуск анимаций, логирование или модификацию DOM.

Синтаксис и подключение

Событие onShow указывается при создании экземпляра уведомления через объект конфигурации:

new Noty({
    text: 'Пример уведомления',
    type: 'success',
    timeout: 3000,
    callbacks: {
        onShow: function() {
            console.log('Уведомление показано');
        }
    }
}).show();

Пояснения по синтаксису:

  • callbacks — объект, содержащий функции обратного вызова для различных событий уведомления.
  • onShow — функция, выполняемая в момент начала отображения уведомления.
  • this внутри onShow указывает на текущий экземпляр уведомления, что позволяет изменять его свойства динамически.

Использование this в onShow

Экземпляр уведомления предоставляет доступ ко всем его свойствам:

new Noty({
    text: 'Демонстрация изменения стиля',
    type: 'info',
    callbacks: {
        onShow: function() {
            this.barDom.style.backgroundColor = '#3498db';
            this.barDom.style.color = '#fff';
        }
    }
}).show();

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

  • this.barDom — DOM-элемент уведомления, который можно изменять.
  • this.options — объект настроек уведомления, позволяющий динамически корректировать параметры.

Отличие onShow от onShown

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

Использование onShow удобно для преднастройки элементов или динамического изменения стилей перед тем, как пользователь заметит уведомление.

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

1. Динамическое изменение текста

new Noty({
    text: 'Загрузка...',
    type: 'alert',
    callbacks: {
        onShow: function() {
            this.setText('Загрузка завершена');
        }
    }
}).show();

2. Логирование для аналитики

new Noty({
    text: 'Новое уведомление',
    type: 'success',
    callbacks: {
        onShow: function() {
            console.log(`Показано уведомление типа: ${this.options.type}`);
        }
    }
}).show();

3. Интеграция с внешними анимациями

new Noty({
    text: 'Анимация включена',
    type: 'warning',
    callbacks: {
        onShow: function() {
            this.barDom.classList.add('custom-fade-in');
        }
    }
}).show();

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

  • Всегда проверять существование this.barDom перед манипуляцией DOM, чтобы избежать ошибок.
  • Использовать onShow для настроек или визуальных изменений, которые должны произойти сразу при появлении, но не требуют завершения анимации.
  • Для действий, которые должны выполняться после полной отрисовки, предпочтительнее использовать onShown.

Ограничения и особенности

  • Событие onShow не повторяется при повторном отображении уведомления; оно привязано к одному показу конкретного экземпляра.
  • Изменение DOM в onShow может влиять на анимацию, поэтому рекомендуется применять стили или классы аккуратно, чтобы не нарушить плавность отображения.

Резюме по onShow

Событие onShow в Noty предоставляет возможность вмешательства в процесс показа уведомления на раннем этапе. Оно идеально подходит для:

  • изменения стилей и текста в момент появления;
  • интеграции с внешними анимациями;
  • ведения логов и аналитики взаимодействия.

Правильное использование onShow позволяет создавать динамичные и визуально адаптивные уведомления без задержек и лишних обработчиков.

Оглавление