Отключение анимации

Библиотека Noty использует анимации для появления и исчезновения уведомлений. По умолчанию применяются CSS-классы (например, из Animate.css или собственные стили), которые создают плавные визуальные переходы. Однако в ряде случаев анимации необходимо отключить:

  • при разработке и отладке интерфейса
  • для повышения производительности на слабых устройствах
  • при строгих требованиях к UX (мгновенное отображение сообщений)
  • в тестировании (исключение задержек и нестабильности)

Отключение анимации в Noty реализуется через конфигурацию параметров animation.

Базовое отключение анимации

Анимация управляется двумя свойствами:

  • open — отвечает за появление уведомления
  • close — отвечает за скрытие уведомления

Чтобы полностью отключить анимацию, необходимо установить для обоих свойств значение null или false.

new Noty({
  text: 'Уведомление без анимации',
  animation: {
    open: null,
    close: null
  }
}).show();

Альтернативный вариант:

new Noty({
  text: 'Без анимации',
  animation: false
}).show();

Во втором случае отключаются все анимации сразу.

Поведение при отключенной анимации

После отключения:

  • уведомление появляется мгновенно, без переходов
  • исчезновение происходит сразу после вызова close() или истечения timeout
  • не применяются CSS-классы анимации
  • уменьшается нагрузка на браузер

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

Глобальное отключение анимации

Noty позволяет задать настройки по умолчанию через Noty.overrideDefaults. Это удобно, если требуется отключить анимации во всём приложении.

Noty.overrideDefaults({
  animation: {
    open: null,
    close: null
  }
});

После этого все создаваемые уведомления будут без анимации, если явно не указано обратное.

Частичное отключение

Иногда требуется отключить только одну фазу — например, оставить анимацию появления, но убрать исчезновение.

new Noty({
  text: 'Без анимации закрытия',
  animation: {
    open: 'animated fadeIn',
    close: null
  }
}).show();

Или наоборот:

new Noty({
  text: 'Без анимации появления',
  animation: {
    open: null,
    close: 'animated fadeOut'
  }
}).show();

Такой подход позволяет гибко контролировать UX.

Использование пустых строк

Вместо null допускается использование пустых строк:

animation: {
  open: '',
  close: ''
}

Это также отключает применение CSS-классов, но считается менее явным способом. Предпочтительнее использовать null или false.

Влияние на тайминги

При отключенной анимации:

  • параметр timeout начинает отсчитываться сразу
  • отсутствуют задержки на завершение CSS-анимаций
  • события onShow и onClose срабатывают быстрее

Это важно учитывать при логике, завязанной на жизненный цикл уведомления.

Использование в тестировании

В автоматических тестах отключение анимации — стандартная практика:

Noty.overrideDefaults({
  animation: false,
  timeout: 0
});

Преимущества:

  • предсказуемость поведения
  • отсутствие асинхронных задержек
  • упрощение проверки DOM

Отключение анимации через CSS

Дополнительно можно полностью убрать анимации на уровне CSS:

.noty_effects_open,
.noty_effects_close {
  animation: none !important;
  transition: none !important;
}

Этот способ полезен, если анимации задаются сторонними стилями или библиотеками.

Производительность и оптимизация

Отключение анимации может значительно повлиять на производительность:

  • снижает нагрузку на GPU
  • уменьшает количество repaint/reflow
  • ускоряет массовое отображение уведомлений

Особенно заметно при:

  • потоковых уведомлениях (логирование, события)
  • мобильных устройствах
  • старых браузерах

Комбинирование с другими параметрами

Отключение анимации часто используется вместе с:

  • timeout: false — уведомление не исчезает
  • progressBar: false — отключение прогресс-бара
  • queue: false — мгновенное отображение без очереди

Пример:

new Noty({
  text: 'Статичное уведомление',
  timeout: false,
  progressBar: false,
  animation: false,
  queue: false
}).show();

Распространённые ошибки

1. Указание несуществующих классов

animation: {
  open: 'none',
  close: 'none'
}

Такой код не отключает анимацию, а просто не применяет корректные классы. Используется null или false.

2. Частичное переопределение без учёта дефолтов

Если указать только open, close может остаться анимированным:

animation: {
  open: null
}

Лучше всегда задавать оба свойства.

3. Конфликт с внешними CSS-библиотеками

Если подключена Animate.css или аналогичная библиотека, она может добавлять эффекты по умолчанию. В таком случае требуется явное отключение.

Когда отключение анимации оправдано

  • системные уведомления (ошибки, алерты)
  • интерфейсы администрирования
  • high-frequency события
  • автоматическое логирование
  • unit и e2e тесты

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

Итоговое поведение системы без анимации

После полного отключения:

  • уведомления становятся “синхронными”
  • исчезают визуальные задержки
  • упрощается управление жизненным циклом
  • повышается стабильность в тестах
  • интерфейс становится более строгим и быстрым

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

Оглавление