Встроенные анимации исчезновения

Библиотека iziToast предоставляет набор встроенных анимаций для появления и исчезновения уведомлений, что позволяет создавать визуально привлекательные и плавные сообщения без дополнительного CSS или JS. Особенно важной является возможность настройки анимации исчезновения, так как она влияет на восприятие интерфейса и на пользовательский опыт.

Настройка анимации исчезновения

Анимация исчезновения управляется свойством transitionOut. Это свойство принимает строковое значение, соответствующее одной из встроенных анимаций. Примеры значений:

  • "fadeOut" — плавное исчезновение с постепенным уменьшением прозрачности.
  • "fadeOutUp" — исчезновение с одновременным смещением вверх.
  • "fadeOutDown" — исчезновение с одновременным смещением вниз.
  • "fadeOutLeft" — исчезновение с уходом влево.
  • "fadeOutRight" — исчезновение с уходом вправо.
  • "flipOutX" — 3D переворот по оси X при исчезновении.
  • "flipOutY" — 3D переворот по оси Y при исчезновении.
  • "bounceOut" — анимация с эффектом отскока при исчезновении.
  • "zoomOut" — уменьшение с исчезновением через масштабирование.

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

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление исчезнет с эффектом fadeOutUp',
    position: 'topRight',
    transitionOut: 'fadeOutUp',
    timeout: 4000
});

Параметры, влияющие на анимацию исчезновения

  1. timeout Определяет время в миллисекундах, через которое уведомление автоматически исчезает. Анимация исчезновения запускается по истечении этого времени.

  2. onClosing и onClosed Колбэки, которые позволяют выполнять действия до и после завершения анимации исчезновения:

iziToast.show({
    title: 'Закрытие уведомления',
    message: 'Анимация fadeOutRight',
    transitionOut: 'fadeOutRight',
    timeout: 3000,
    onClosing: function(instance, toast, closedBy){
        console.log('Уведомление закрывается, причина:', closedBy);
    },
    onClosed: function(instance, toast, closedBy){
        console.log('Уведомление полностью скрыто');
    }
});
  1. transitionIn Хотя основное внимание уделяется исчезновению, комбинация с анимацией появления позволяет создавать более плавный эффект:
iziToast.show({
    title: 'Пример',
    message: 'fadeInDown и fadeOutUp',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    timeout: 3500
});

Влияние позиции уведомления на анимацию

Некоторые анимации исчезновения лучше смотрятся в зависимости от позиции уведомления на экране:

  • fadeOutUp — оптимально для уведомлений, расположенных снизу (bottomRight, bottomLeft), так как эффект подъема кажется естественным.
  • fadeOutDown — хорошо для уведомлений, расположенных сверху (topRight, topLeft).
  • fadeOutLeft и fadeOutRight — подходят для центральных уведомлений или модальных окон.

Комбинирование с пользовательскими стилями

Хотя iziToast предоставляет встроенные анимации, можно добавлять собственные CSS-классы для более сложных эффектов исчезновения:

iziToast.show({
    title: 'Пользовательская анимация',
    message: 'slide-fade',
    class: 'custom-toast',
    transitionOut: 'slideOutRight'
});

В CSS:

.custom-toast {
    border-left: 4px solid #3498db;
}

Практические рекомендации

  • Не использовать слишком сложные анимации на коротких уведомлениях, чтобы пользователь успел их воспринять.
  • Сочетать визуальный стиль уведомления с общей анимационной концепцией интерфейса.
  • Для критических сообщений предпочтительно использовать fadeOut или fadeOutUp/Down, так как они менее отвлекают.

Благодаря встроенным анимациям исчезновения, iziToast позволяет создавать динамичные и визуально гармоничные уведомления без дополнительных библиотек или ручной анимации. Важно правильно подбирать комбинацию transitionOut, timeout и позиции для максимального эффекта.

Оглавление