Анимации с использованием Animate.css

Библиотека iziToast предоставляет мощный инструмент для создания уведомлений на веб-страницах, а её гибкость позволяет подключать сторонние анимации для более выразительного визуального эффекта. Одним из популярных решений является использование Animate.css — готовой библиотеки CSS-анимаций, которая облегчает добавление плавных эффектов появления и скрытия уведомлений.

Подключение Animate.css

Для начала необходимо подключить стили Animate.css к проекту. Это можно сделать через CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

После этого анимации будут доступны для использования в любых HTML-элементах и уведомлениях iziToast.

Настройка анимаций появления и скрытия

iziToast поддерживает свойства animateInside, transitionIn и transitionOut, которые позволяют задавать классы анимаций для появления и закрытия уведомлений. При интеграции с Animate.css удобно использовать уже готовые классы, такие как animate__fadeInDown, animate__fadeOutUp, animate__bounceIn, animate__zoomOut.

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

iziToast.show({
    title: 'Успешно!',
    message: 'Данные сохранены.',
    theme: 'light',
    position: 'topRight',
    transitionIn: 'animate__animated animate__fadeInDown',
    transitionOut: 'animate__animated animate__fadeOutUp',
    timeout: 5000
});

Пояснения:

  • animate__animated — обязательный класс, который активирует Animate.css анимацию.
  • animate__fadeInDown — эффект появления сверху вниз.
  • animate__fadeOutUp — эффект скрытия вверх.
  • timeout определяет длительность показа уведомления.

Комбинирование анимаций

Можно комбинировать несколько классов Animate.css, чтобы получить уникальный эффект. Например, появление с масштабированием и вращением:

iziToast.show({
    title: 'Внимание!',
    message: 'Произошла ошибка.',
    position: 'bottomLeft',
    transitionIn: 'animate__animated animate__zoomIn animate__rotateIn',
    transitionOut: 'animate__animated animate__zoomOut animate__rotateOut',
    timeout: 7000
});

Такой подход позволяет создавать динамичные и визуально привлекательные уведомления без дополнительного написания CSS.

Управление анимациями для разных типов уведомлений

Для разных типов сообщений (успех, ошибка, предупреждение, информация) можно задавать разные анимации:

iziToast.success({
    title: 'Готово',
    message: 'Операция выполнена успешно',
    transitionIn: 'animate__animated animate__bounceIn',
    transitionOut: 'animate__animated animate__bounceOut'
});

iziToast.error({
    title: 'Ошибка',
    message: 'Невозможно выполнить запрос',
    transitionIn: 'animate__animated animate__shakeX',
    transitionOut: 'animate__animated animate__fadeOut'
});

Такое разделение усиливает визуальное восприятие типов уведомлений и делает интерфейс более интуитивным.

Продвинутая кастомизация

Для более тонкой настройки можно использовать события iziToast: onOpening и onClosing. Это позволяет применять анимации с задержкой, изменять длительность, запускать дополнительные эффекты или взаимодействовать с DOM.

iziToast.show({
    title: 'Информация',
    message: 'Подключение успешно',
    position: 'topRight',
    onOpening: function(instance, toast){
        toast.classList.add('animate__animated', 'animate__fadeInRight');
    },
    onClosing: function(instance, toast, closedBy){
        toast.classList.add('animate__animated', 'animate__fadeOutRight');
    }
});

Такой способ даёт полный контроль над моментом запуска анимаций и их последовательностью.

Советы по производительности

  • Не рекомендуется использовать слишком много сложных анимаций одновременно, так как это может замедлить рендеринг страницы.
  • Для уведомлений с большим количеством текста лучше выбирать плавные эффекты типа fadeIn/fadeOut, чтобы сохранить читаемость.
  • Использование CSS-анимаций предпочтительнее JS-анимаций для плавной работы на мобильных устройствах.

Итог

Совместное использование iziToast и Animate.css позволяет создавать уведомления с выразительными, легко настраиваемыми анимациями. Управление через transitionIn, transitionOut и события onOpening/onClosing открывает широкие возможности для кастомизации внешнего вида и поведения уведомлений, делая интерфейс интерактивным и современным.

Оглавление