Анимация появления

В библиотеке iziToast анимация появления уведомлений настраивается через опции animateInside и transitionIn. Параметр transitionIn отвечает за эффект появления самого тоста, а animateInside позволяет анимировать содержимое уведомления при его рендеринге.

Параметр transitionIn

Опция transitionIn принимает строковые значения, определяющие стиль анимации появления. Доступные варианты:

  • fadeIn – плавное появление с увеличением прозрачности.
  • fadeInDown – появление с движения сверху вниз.
  • fadeInUp – появление с движения снизу вверх.
  • bounceInLeft – появление с вылетом слева с эффектом «прыжка».
  • bounceInRight – появление с вылетом справа с эффектом «прыжка».

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

iziToast.show({
    title: 'Успех',
    message: 'Данные сохранены успешно!',
    position: 'topRight',
    transitionIn: 'fadeInDown',
});

В этом примере уведомление плавно появляется сверху вниз, создавая ощущение динамичного входа на экран.

Параметр animateInside

Опция animateInside контролирует анимацию содержимого уведомления после его появления. При значении true элементы уведомления, такие как заголовок, текст и кнопки, могут появляться с дополнительной анимацией. Пример:

iziToast.show({
    title: 'Внимание',
    message: 'Произошла ошибка при загрузке данных.',
    animateInside: true,
    transitionIn: 'bounceInLeft',
});

Комбинирование этих параметров позволяет создавать более выразительные уведомления.

Настройка длительности анимации

iziToast использует CSS-анимации, поэтому скорость появления уведомления регулируется через параметр transitionInDuration. По умолчанию длительность равна 400 миллисекундам, но её можно изменить:

iziToast.show({
    title: 'Информация',
    message: 'Загрузка завершена',
    transitionIn: 'fadeIn',
    transitionInDuration: 800, // анимация длится 0.8 секунды
});

Увеличение значения делает анимацию плавнее, уменьшение – быстрее и более динамичной.

Комбинация появления и исчезновения

Для более сложной анимации важно учитывать параметр transitionOut, который задает эффект исчезновения уведомления. Часто используют одинаковый стиль для появления и исчезновения, чтобы визуально создать симметричный эффект:

iziToast.show({
    title: 'Готово',
    message: 'Файл успешно загружен',
    transitionIn: 'fadeInUp',
    transitionOut: 'fadeOutDown',
    transitionInDuration: 600,
    transitionOutDuration: 600
});

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

Позиционирование и анимация появления

Анимация появления тесно связана с позицией уведомления. Для каждой позиции есть стандартные направления анимации:

  • topRight / topLeft – чаще используют fadeInDown или bounceInLeft/right.
  • bottomRight / bottomLeft – чаще используют fadeInUp или bounceInLeft/right.
  • topCenter / bottomCenter – используют fadeInDown или fadeInUp.

Пример с верхним центром:

iziToast.show({
    title: 'Системное уведомление',
    message: 'Сессия истекла',
    position: 'topCenter',
    transitionIn: 'fadeInDown',
});

Такой подход делает уведомления интуитивно понятными для пользователя: элементы появляются из ожидаемого направления, соответствующего позиции на экране.

Использование CSS для кастомных анимаций

Помимо встроенных переходов, можно создавать свои анимации через CSS. Для этого задают класс через параметр class или переопределяют стандартные классы iziToast. Пример:

.custom-fadeIn {
    animation: customFadeIn 1s forwards;
}

@keyframes customFadeIn {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}
iziToast.show({
    title: 'Кастом',
    message: 'Используется собственная анимация',
    class: 'custom-fadeIn'
});

Такой подход позволяет точно контролировать эффект появления, включая масштабирование, вращение и изменение прозрачности.

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

  • Простые уведомления – лучше использовать fadeIn или fadeInDown, чтобы не отвлекать пользователя.
  • Критичные уведомления – используют броские эффекты (bounceInLeft/Right) для привлечения внимания.
  • Комбинирование с длительностью – длительная анимация подходит для медленных интерфейсов, короткая – для быстрых реактивных интерфейсов.

Правильное сочетание позиции, типа анимации и длительности позволяет сделать уведомления визуально приятными и удобными для пользователя.

Оглавление