Параметр animation.close

В библиотеке Noty параметр animation.close отвечает за настройку анимации, которая выполняется при закрытии уведомления. Он является частью более общего объекта animation, который позволяет управлять визуальными эффектами как при открытии (animation.open), так и при закрытии уведомления. Настройка закрытия уведомления имеет критическое значение для пользовательского опыта, так как плавное исчезновение уведомления делает интерфейс более естественным и приятным.

Синтаксис и структура

animation.close задается объектом с ключами, которые определяют тип анимации и её свойства. Стандартная структура выглядит следующим образом:

animation: {
    open: 'animated fadeIn',
    close: 'animated fadeOut'
}

open — класс или набор классов CSS для анимации открытия.
close — класс или набор классов CSS для анимации закрытия.

Возможные значения

Строка с классами CSS Наиболее простой вариант — это передача строки с классами анимации, например:
```
new Noty({
    text: 'Уведомление',
    animation: {
        open: 'animated bounceIn',
        close: 'animated bounceOut'
    }
}).show();
```
Здесь используется библиотека Animate.css. Классы bounceOut или fadeOut задают визуальный эффект при закрытии.
Объект с методами height и opacity Более детальный способ настройки анимации — передача объекта, содержащего свойства height и opacity, каждое из которых принимает объект с параметрами from, to, duration, и опционально easing:
```
new Noty({
    text: 'Уведомление с кастомной анимацией',
    animation: {
        close: {
            height: { from: 'auto', to: 0, duration: 500, easing: 'easeInOutQuad' },
            opacity: { from: 1, to: 0, duration: 500, easing: 'easeInOutQuad' }
        }
    }
}).show();
```
- from — начальное значение свойства.
- to — конечное значение свойства.
- duration — длительность анимации в миллисекундах.
- easing — функция сглаживания (например, linear, easeInOutQuad, easeOutBounce).

Особенности поведения

Если animation.close не задан, уведомление исчезает мгновенно, без анимации.
Настройка CSS-анимаций через строки ('animated fadeOut') требует подключения соответствующей CSS-библиотеки.
Объектный способ анимации (height + opacity) более универсален и не требует внешних библиотек, но требует точной настройки параметров для естественного эффекта.

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

Плавное исчезновение с уменьшением высоты и прозрачности:

new Noty({
    text: 'Задача успешно выполнена',
    timeout: 3000,
    animation: {
        close: {
            height: { from: 'auto', to: 0, duration: 400 },
            opacity: { from: 1, to: 0, duration: 400 }
        }
    }
}).show();

Закрытие с эффектом сдвига и исчезновения:

new Noty({
    text: 'Ошибка при загрузке',
    animation: {
        close: {
            height: { from: 'auto', to: 0, duration: 500 },
            opacity: { from: 1, to: 0, duration: 500 },
            easing: 'easeOutBack'
        }
    }
}).show();

Взаимодействие с другими параметрами

timeout — анимация закрытия автоматически запускается после истечения времени таймера.
modal — если уведомление модальное, анимация закрытия применяется к контейнеру модального окна.
Методы close() и stop() — вызов метода close() инициирует анимацию закрытия, при этом метод stop() может прервать её выполнение, что полезно для динамических интерфейсов.