Пользовательские CSS-анимации

Библиотека iziToast предоставляет встроенные анимации для появления и исчезновения уведомлений, однако её гибкость позволяет использовать собственные CSS-анимации, полностью контролируя визуальное поведение уведомлений. Подход основан на указании классов анимации через опции animateInside и transitionIn / transitionOut.

Настройка кастомных анимаций

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

  • transitionIn – класс CSS для анимации появления уведомления.
  • transitionOut – класс CSS для анимации скрытия уведомления.
  • animateInside – класс CSS, который применяется к внутренним элементам уведомления (иконка, текст, кнопка закрытия).

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

iziToast.show({
    title: 'Пример',
    message: 'Использование кастомной анимации',
    transitionIn: 'fadeInDown',
    transitionOut: 'fadeOutUp',
    animateInside: 'bounce'
});

В данном примере уведомление будет появляться с эффектом fadeInDown, исчезать с fadeOutUp, а содержимое внутри — анимироваться с эффектом bounce.

Создание собственных CSS-анимаций

Чтобы использовать свои анимации, необходимо определить их в CSS. Для этого применяются стандартные правила @keyframes и свойства animation.

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

@keyframes slideFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideToRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.custom-slide-in {
    animation: slideFromLeft 0.6s ease forwards;
}

.custom-slide-out {
    animation: slideToRight 0.6s ease forwards;
}

Подключение кастомной анимации в iziToast:

iziToast.show({
    title: 'Кастомная анимация',
    message: 'Сдвиг уведомления слева направо',
    transitionIn: 'custom-slide-in',
    transitionOut: 'custom-slide-out'
});

Анимация внутренних элементов

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

Пример:

@keyframes iconPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes textFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.custom-icon {
    animation: iconPop 0.5s ease forwards;
}

.custom-text {
    animation: textFadeIn 0.8s ease forwards;
}

Подключение:

iziToast.show({
    title: 'Внутренние анимации',
    message: 'Иконка и текст с разными эффектами',
    animateInside: 'custom-icon custom-text'
});

Важно помнить, что при использовании нескольких классов внутри animateInside порядок классов может влиять на последовательность анимации элементов.

Плавность и производительность

Для обеспечения плавности анимаций рекомендуется:

  • Использовать transform и opacity, так как они аппаратно ускоряются большинством браузеров.
  • Избегать анимации height или width, так как это вызывает перерасчет макета (reflow), что замедляет работу страницы.
  • Задавать forwards в свойствах animation-fill-mode, чтобы после завершения анимации элементы сохраняли конечное состояние.

Пример оптимальной анимации:

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

.smooth-fade-in {
    animation: fadeSlideUp 0.4s ease-out forwards;
}

Комбинирование с delay и duration

iziToast поддерживает параметры timeout и progressBar, которые могут синхронизироваться с пользовательской анимацией. Например, если уведомление должно исчезнуть через 3 секунды, а анимация выхода длится 0.5 секунды, необходимо правильно рассчитать timeout:

iziToast.show({
    title: 'Тайминг анимации',
    message: 'Уведомление исчезнет плавно через 3 секунды',
    timeout: 3500, // 3000 + 500 для анимации скрытия
    transitionIn: 'smooth-fade-in',
    transitionOut: 'custom-slide-out'
});

Так уведомление завершает анимацию выхода до того, как полностью исчезнет с экрана.

Использование библиотек анимаций

Для расширенных эффектов можно подключать готовые CSS-библиотеки, например Animate.css, и использовать их классы в качестве transitionIn, transitionOut и animateInside. Пример:

iziToast.show({
    title: 'Animate.css',
    message: 'Использование готовых анимаций',
    transitionIn: 'animate__animated animate__zoomIn',
    transitionOut: 'animate__animated animate__zoomOut',
    animateInside: 'animate__animated animate__bounceIn'
});

Практические советы

  • Держать анимации короткими (0.3–0.6 секунды) для отзывчивого интерфейса.
  • Проверять работу на мобильных устройствах — сложные трансформации могут замедлять рендеринг.
  • Разделять анимации появления всей карточки уведомления и внутренних элементов, чтобы создавать эффект слоистости.
  • Использовать классы с осмысленными именами (slide-from-left, fade-pop-up) для удобства поддержки проекта.

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

Оглавление