Управление скоростью анимации

Библиотека Toastify предоставляет гибкие инструменты для настройки визуального поведения уведомлений, включая скорость появления и исчезновения. Контроль анимации влияет на восприятие интерфейса: слишком быстрые уведомления могут остаться незамеченными, а слишком медленные — раздражать пользователя.

Базовые параметры, влияющие на анимацию

Скорость анимации в Toastify напрямую не задаётся отдельным параметром вроде animationDuration, но контролируется через комбинацию свойств:

  • duration — общее время отображения уведомления (в миллисекундах)
  • gravity и position — косвенно влияют на восприятие движения
  • stopOnFocus — влияет на остановку таймера при наведении
  • CSS-анимации — основной инструмент тонкой настройки

Пример базовой конфигурации:

Toastify({
  text: "Уведомление",
  duration: 3000
}).showToast();

Здесь duration: 3000 означает, что уведомление будет находиться на экране 3 секунды, включая анимацию появления и исчезновения.

Влияние CSS на скорость анимации

Toastify использует CSS-анимации для отображения уведомлений. Это означает, что реальная скорость появления и исчезновения задаётся через стили.

По умолчанию применяются классы:

  • .toastify — основной контейнер
  • .toastify.on — активное состояние (появление)

Изменение скорости через CSS

.toastify {
  transition: all 0.5s ease;
}

В данном примере:

  • 0.5s — длительность анимации
  • ease — функция сглаживания

Увеличение значения приведёт к более плавной и медленной анимации:

.toastify {
  transition: all 1s ease-in-out;
}

Управление анимацией появления

Появление уведомления происходит за счёт добавления класса .on. Можно изменить начальное и конечное состояние:

.toastify {
  opacity: 0;
  transform: translateY(20px);
}

.toastify.on {
  opacity: 1;
  transform: translateY(0);
}

Скорость перехода определяется свойством transition.

Управление анимацией исчезновения

Исчезновение происходит автоматически после истечения duration. В этот момент класс .on удаляется.

Для контроля скорости исчезновения используется тот же transition:

.toastify {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

Разделение скорости появления и исчезновения

Стандартный подход Toastify не разделяет анимации появления и скрытия, но это можно реализовать через CSS:

.toastify {
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.toastify.on {
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

Особенность: браузер применяет текущие правила transition в момент изменения состояния, поэтому важно правильно задать их в обоих состояниях.

Управление через кастомные классы

Toastify позволяет добавлять собственные CSS-классы через параметр className:

Toastify({
  text: "Кастомная анимация",
  duration: 4000,
  className: "slow-toast"
}).showToast();

CSS:

.slow-toast {
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

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

Использование easing-функций

Функции сглаживания сильно влияют на восприятие скорости:

  • linear — равномерное движение
  • ease — стандартное плавное
  • ease-in — ускорение
  • ease-out — замедление
  • cubic-bezier(...) — пользовательская кривая

Пример:

.toastify {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Такой вариант создаёт эффект “пружины”.

Синхронизация duration и animation

Важно учитывать, что:

  • duration включает время, когда уведомление полностью видно
  • CSS transition добавляет дополнительное время на вход и выход

Пример:

Toastify({
  text: "Сообщение",
  duration: 2000
}).showToast();
.toastify {
  transition: all 1s ease;
}

Фактически:

  • 1 секунда — появление
  • 2 секунды — отображение
  • 1 секунда — исчезновение

Итого: ~4 секунды

Отключение анимации

Для мгновенного появления и исчезновения:

.toastify {
  transition: none;
}

Это полезно:

  • при тестировании
  • для минималистичных интерфейсов
  • в условиях ограниченной производительности

Динамическое изменение скорости

Скорость можно менять программно, подставляя разные классы:

const speedClass = "fast-toast";

Toastify({
  text: "Быстрое уведомление",
  className: speedClass
}).showToast();
.fast-toast {
  transition: all 0.2s ease;
}

.slow-toast {
  transition: all 1.5s ease;
}

Влияние позиции на восприятие скорости

Параметры:

gravity: "top",
position: "right"

визуально изменяют восприятие:

  • сверху — быстрее воспринимается
  • снизу — кажется медленнее
  • центр — максимально заметно

Это важно учитывать при подборе длительности и анимации.

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

  • Короткие уведомления: 200–400 мс анимация
  • Стандартные: 400–700 мс
  • Акцентные: до 1–1.5 секунды
  • duration всегда должен превышать суммарное время анимации

Баланс достигается через сочетание:

  • CSS transition
  • параметра duration
  • функции сглаживания

Пример полной настройки

Toastify({
  text: "Сбалансированное уведомление",
  duration: 3000,
  className: "custom-toast"
}).showToast();
.custom-toast {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.custom-toast.on {
  opacity: 1;
  transform: translateX(0);
}

Такой подход обеспечивает:

  • плавное появление
  • комфортное время чтения
  • мягкое исчезновение

Контроль скорости анимации в Toastify полностью зависит от CSS, что даёт широкие возможности для адаптации поведения уведомлений под конкретные интерфейсные задачи.

Оглавление