Анимация при наведении

Анимации при наведении в Toastify строятся на комбинации CSS-переходов и событий мыши, которые применяются к DOM-элементу уведомления. Библиотека не накладывает жёстких ограничений на кастомизацию, поэтому поведение hover-эффектов полностью контролируется стилями.

Каждое уведомление создаётся как HTML-элемент с классом .toastify, что позволяет легко управлять его состояниями через псевдоклассы:

.toastify:hover {
  /* стили при наведении */
}

Базовая логика:

при наведении (:hover) применяются новые стили
при уходе курсора происходит обратный переход
плавность обеспечивается через transition

Использование CSS-переходов

Для создания плавной анимации применяется свойство transition. Оно задаёт:

какие свойства анимируются
длительность
функцию времени

Пример базовой анимации:

.toastify {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.toastify:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

Эффект:

уведомление слегка увеличивается
появляется более выраженная тень
создаётся ощущение интерактивности

Анимация смещения

Смещение используется для создания «живого» интерфейса:

.toastify {
  transition: transform 0.25s ease;
}

.toastify:hover {
  transform: translateY(-5px);
}

Особенности:

не влияет на поток документа
работает быстрее, чем изменение top или margin
использует GPU-ускорение

Изменение прозрачности

Эффект затемнения или осветления:

.toastify {
  transition: opacity 0.3s ease;
}

.toastify:hover {
  opacity: 0.85;
}

Часто применяется для:

уменьшения визуального шума
создания «нажатого» состояния

Анимация цвета фона

Позволяет выделить уведомление при взаимодействии:

.toastify {
  background: linear-gradient(135deg, #4f9cff, #6ed0ff);
  transition: background 0.3s ease;
}

.toastify:hover {
  background: linear-gradient(135deg, #3a7bd5, #00d2ff);
}

Важно:

градиенты также анимируются
переходы должны быть одинакового типа

Добавление эффекта свечения

Создание акцента через box-shadow:

.toastify {
  transition: box-shadow 0.3s ease;
}

.toastify:hover {
  box-shadow: 0 0 15px rgba(79, 156, 255, 0.8);
}

Использование:

уведомления об успехе
акцентные сообщения

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

Часто используется сочетание нескольких эффектов:

.toastify {
  transition: all 0.3s ease;
}

.toastify:hover {
  transform: scale(1.03) translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  opacity: 0.95;
}

Результат:

элемент «поднимается»
становится более заметным
усиливается глубина

Управление курсором

Изменение курсора усиливает UX:

.toastify:hover {
  cursor: pointer;
}

Используется, если:

уведомление кликабельно
содержит действие (например, переход по ссылке)

Связь с параметром `stopOnFocus`

Toastify предоставляет параметр:

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

Поведение:

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

Комбинация с hover-анимацией:

визуально сигнализирует о фокусе
логически соответствует остановке времени

Анимация через добавление классов

Можно динамически менять классы при наведении:

const toast = Toastify({
  text: "Hover эффект",
  duration: 5000,
  onClick: function() {}
}).showToast();

setTimeout(() => {
  const el = document.querySelector(".toastify");
  
  el.addEventListener("mouseenter", () => {
    el.classList.add("hovered");
  });

  el.addEventListener("mouseleave", () => {
    el.classList.remove("hovered");
  });
}, 100);

CSS:

.toastify.hovered {
  transform: scale(1.05);
}

Преимущество:

возможность сложной логики
интеграция с JS-анимациями

Использование keyframes-анимаций

Для более сложных эффектов:

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.toastify:hover {
  animation: pulse 0.6s ease;
}

Особенности:

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

Производительность анимаций

Рекомендуемые свойства:

transform
opacity

Менее эффективные:

width, height
margin, top

Причина:

первые обрабатываются GPU
вторые вызывают перерасчёт layout

Ограничение области анимации

Если уведомление содержит вложенные элементы:

.toastify:hover .content {
  transform: scale(1.02);
}

Позволяет:

анимировать только часть
избегать перегруженности

Практика: стиль уведомления с hover-эффектом

Toastify({
  text: "Сообщение с анимацией",
  duration: 4000,
  gravity: "top",
  position: "right",
  className: "custom-toast"
}).showToast();

.custom-toast {
  border-radius: 12px;
  padding: 16px;
  transition: all 0.25s ease;
}

.custom-toast:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

Типичные ошибки

Отсутствие transition

.toastify:hover {
  transform: scale(1.1);
}

Результат — резкий скачок.

Анимация неподдерживаемых свойств

.toastify:hover {
  display: none;
}

Чрезмерная анимация

перегружает интерфейс
отвлекает от содержания

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

Hover не работает на сенсорных экранах. Возможные решения:

дублирование эффекта при :active
использование JS-событий (touchstart)

.toastify:active {
  transform: scale(0.98);
}

Интеграция с темами

Hover-анимации должны соответствовать теме:

светлая тема → мягкие тени
тёмная тема → более яркие акценты
цветные уведомления → аккуратные изменения оттенка

Расширенные техники

Псевдоэлементы:

.toastify::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.toastify:hover::after {
  opacity: 1;
}

Фильтры:

.toastify:hover {
  filter: brightness(1.1);
}

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

Если Toastify уже использует анимации появления:

.toastify {
  will-change: transform;
}