Скорость анимаций

В iziToast скорость анимаций управляется с помощью свойства transitionIn и transitionOut, а также опции transitionInDuration и transitionOutDuration. Эти параметры определяют, как быстро уведомление появляется и исчезает с экрана.

iziToast.show({
    title: 'Пример',
    message: 'Уведомление с кастомной анимацией',
    transitionIn: 'fadeInUp',
    transitionOut: 'fadeOutDown',
    transitionInDuration: 700,
    transitionOutDuration: 500
});
  • transitionIn – задаёт тип анимации появления уведомления. Возможные значения: 'fadeIn', 'fadeInUp', 'fadeInDown', 'flipInX' и другие.
  • transitionOut – задаёт тип анимации исчезновения уведомления. Аналогично transitionIn.
  • transitionInDuration – время появления уведомления в миллисекундах.
  • transitionOutDuration – время исчезновения уведомления в миллисекундах.

Увеличение значений transitionInDuration и transitionOutDuration делает анимацию более плавной, уменьшение — более резкой.

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

Можно задавать отдельные скорости для разных типов уведомлений: success, error, warning, info. Это полезно, если визуально необходимо выделять определённые сообщения.

iziToast.success({
    title: 'Успех',
    message: 'Операция выполнена',
    transitionInDuration: 800,
    transitionOutDuration: 400
});

iziToast.error({
    title: 'Ошибка',
    message: 'Произошла ошибка',
    transitionInDuration: 400,
    transitionOutDuration: 800
});

В этом примере уведомление об успешной операции появляется медленно и исчезает быстрее, а уведомление об ошибке — наоборот, быстро появляется и медленно исчезает.

Глобальная настройка скорости анимаций

Для единообразия интерфейса можно настроить скорость анимаций глобально при инициализации iziToast через iziToast.settings():

iziToast.settings({
    transitionIn: 'fadeInUp',
    transitionOut: 'fadeOutDown',
    transitionInDuration: 600,
    transitionOutDuration: 600
});

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

Динамическое управление скоростью через функции

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

iziToast.show({
    title: 'Событие',
    message: 'Динамическая скорость',
    transitionIn: 'fadeIn',
    transitionOut: 'fadeOut',
    transitionInDuration: () => 300 + Math.random() * 700,
    transitionOutDuration: () => 300 + Math.random() * 700
});

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

Совмещение с CSS-анимациями

iziToast позволяет использовать собственные CSS-классы для анимаций, а transitionInDuration и transitionOutDuration контролируют только временные рамки выполнения:

@keyframes customFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes customFadeOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}

.customIn {
    animation: customFadeIn 1s forwards;
}

.customOut {
    animation: customFadeOut 1s forwards;
}
iziToast.show({
    title: 'Кастомная анимация',
    message: 'Используется CSS-анимация',
    transitionIn: 'customIn',
    transitionOut: 'customOut',
    transitionInDuration: 1000,
    transitionOutDuration: 1000
});

Это позволяет полностью контролировать визуальный эффект уведомлений и синхронизировать его с другими элементами интерфейса.

Особенности скорости на мобильных устройствах

На мобильных устройствах стоит учитывать, что плавность анимаций напрямую влияет на производительность. Для слабых устройств рекомендуется устанавливать transitionInDuration и transitionOutDuration в диапазоне 300–600 мс, чтобы избежать лагов при отображении уведомлений.

Оптимальная комбинация — плавная, но не затянутая анимация, которая не мешает восприятию контента.

Итоговые рекомендации по настройке скорости

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

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

Оглавление