Встроенные анимации появления

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

Настройка анимации через CSS-классы

Каждое уведомление в Toastify может использовать CSS-классы для анимации появления и скрытия. Встроенные параметры:

Toastify({
    text: "Пример уведомления",
    duration: 3000,
    gravity: "top",
    position: "right",
    stopOnFocus: true,
    className: "toastify-default",
    offset: {
        x: 50,
        y: 100
    }
}).showToast();
  • className — позволяет задать CSS-класс, к которому можно добавить собственные анимации появления и исчезновения.
  • gravity — позиция уведомления (top или bottom), влияет на направление анимации.
  • position — выравнивание уведомления по горизонтали (left, center, right).

Встроенные эффекты анимации

Toastify имеет несколько предустановленных анимаций:

  1. fade — плавное исчезновение и появление.
  2. slide — выезд уведомления сверху или снизу страницы.
  3. bounce — короткая подпрыгивающая анимация при появлении.

Для активации эффекта используется настройка через CSS, например:

.toastify-default {
    animation: slideIn 0.5s ease forwards, slideOut 0.5s ease forwards;
}

@keyframes slideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-100%); opacity: 0; }
}

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

Управление временем анимации

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

  • animation-duration — задает длительность появления и исчезновения.
  • animation-delay — устанавливает задержку перед началом анимации.
  • animation-timing-function — управляет кривой анимации (linear, ease-in, ease-out, cubic-bezier).

Пример:

.toastify-default {
    animation: fadeIn 0.4s ease-in, fadeOut 0.4s ease-out 2.6s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

Здесь уведомление появляется за 0.4 секунды, остается видимым 2.2 секунды и исчезает за 0.4 секунды.

Интеграция анимаций с событиями

Toastify позволяет использовать колбеки для синхронизации анимаций с действиями пользователя:

  • onClick — можно запускать анимацию скрытия по клику.
  • onShow — триггер при начале анимации появления.
  • onClose — срабатывает при завершении анимации исчезновения.

Пример с колбэками:

Toastify({
    text: "Нажмите, чтобы закрыть",
    duration: 4000,
    onClick: function() {
        console.log("Уведомление закрыто кликом");
    },
    onShow: function() {
        console.log("Начало анимации появления");
    },
    onClose: function() {
        console.log("Анимация исчезновения завершена");
    }
}).showToast();

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

Можно объединять несколько эффектов, например slide + fade, для более выразительного визуального эффекта. Это достигается с помощью нескольких @keyframes и последовательного применения классов:

.toastify-default {
    animation: slideInFade 0.6s forwards, slideOutFade 0.6s 2.4s forwards;
}

@keyframes slideInFade {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideOutFade {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(-50px); opacity: 0; }
}

Такое сочетание делает уведомления динамичными и гармоничными с интерфейсом.

Адаптация к мобильным устройствам

Для корректного отображения анимаций на мобильных платформах следует учитывать размеры экрана и использовать адаптивные offset и position. Toastify корректно масштабирует анимации, если использовать единицы vw, vh или процентные значения:

Toastify({
    text: "Мобильное уведомление",
    gravity: "bottom",
    position: "center",
    offset: { x: "10vw", y: "5vh" }
}).showToast();

Это позволяет анимации появляться плавно независимо от ориентации и размера экрана.

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

Можно принудительно завершить анимацию и скрыть уведомление через метод hideToast():

const toast = Toastify({
    text: "Закрытие вручную",
    duration: 5000
});

toast.showToast();

// Скрытие через 2 секунды
setTimeout(() => {
    toast.hideToast();
}, 2000);

Это особенно полезно для синхронизации с внешними событиями или AJAX-запросами, когда нужно скрыть уведомление до истечения стандартного duration.

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

Оглавление