Типы анимации закрытия

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

Свойство animation.close

Основной способ указать анимацию закрытия — использование объекта animation при создании экземпляра Noty:

new Noty({
    text: 'Сообщение успешно удалено',
    type: 'success',
    animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutLeft'
    },
    timeout: 3000
}).show();
  • open — анимация при появлении уведомления.
  • close — анимация при закрытии уведомления.

Значения могут быть строками с названием CSS-класса или функциями, возвращающими кастомную анимацию. В большинстве случаев используются анимации из библиотеки Animate.css, которая интегрируется с Noty без дополнительных настроек.

Встроенные классы для закрытия

Noty не ограничивает выбор анимации только собственными классами. Наиболее часто применяются:

  • fadeOut — плавное исчезновение элемента.
  • slideOutRight / slideOutLeft — элемент выезжает вправо или влево.
  • bounceOutUp / bounceOutDown — элемент подпрыгивает при исчезновении.
  • zoomOut — уменьшение масштаба до исчезновения.

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

new Noty({
    text: 'Файл загружен',
    type: 'info',
    animation: {
        open: 'fadeIn',
        close: 'fadeOut'
    },
    timeout: 2500
}).show();

Кастомная анимация через функции

Помимо строковых значений, close может быть функцией, которая позволяет управлять поведением уведомления с использованием JavaScript. Функция получает DOM-элемент уведомления, что открывает возможность сложных анимационных эффектов:

new Noty({
    text: 'Данные сохранены',
    animation: {
        close: function(notyElement) {
            $(notyElement).slideUp(500, function() {
                notyElement.remove();
            });
        }
    },
    timeout: 2000
}).show();

Особенности такого подхода:

  • Можно использовать любую библиотеку анимаций (jQuery, GSAP, Velocity).
  • Контроль над временем и последовательностью анимации полностью в руках разработчика.
  • Необходимо самостоятельно удалить элемент после завершения анимации (notyElement.remove()), иначе нотификация останется в DOM.

Настройка продолжительности закрытия

В Noty продолжительность анимации закрытия задаётся через свойство animation в сочетании с CSS или JS-анимацией. Для CSS-классов чаще всего используется стандартная длительность 0.5–1 секунды. Для JS-функций время определяется внутри функции:

animation: {
    close: function(element) {
        $(element).fadeOut(800, function() {
            element.remove();
        });
    }
}

Комбинация с таймаутом

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

new Noty({
    text: 'Ошибка при загрузке',
    type: 'error',
    timeout: 3000,
    animation: {
        open: 'fadeInDown',
        close: 'fadeOutUp'
    }
}).show();
  • timeout указывает время до автоматического закрытия.
  • Анимация close активируется по окончании таймаута или при ручном закрытии (.close()).

Динамическая смена анимации

Noty позволяет изменять анимацию закрытия после создания уведомления:

let n = new Noty({ text: 'Выполняется операция', animation: { close: 'fadeOut' } }).show();

setTimeout(() => {
    n.options.animation.close = 'slideOutLeft';
    n.close();
}, 2000);
  • Позволяет адаптировать визуальное поведение в зависимости от контекста.
  • Может использоваться для создания цепочек анимаций или разных эффектов для разных типов событий.

Советы по выбору анимации

  1. Лёгкая анимация для частых уведомлений — fadeOut или slideOutRight.
  2. Акцентная анимация для ошибок или успеха — bounceOutUp или zoomOut.
  3. Не перегружать интерфейс — слишком сложные анимации отвлекают пользователя.
  4. Сочетать с цветом и типом уведомления — анимация должна усиливать визуальный эффект, а не конфликтовать с ним.

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

Оглавление