Кастомные анимации через CSS

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

Основы работы с анимациями в SweetAlert

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

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

Как подключить кастомные анимации

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

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

.swal2-show {
  animation: zoomIn 0.5s ease-out forwards;
}

В этом примере создается анимация с названием zoomIn, которая увеличивает размер окна от 0 до 1, а также изменяет его прозрачность. Далее, класс .swal2-show отвечает за отображение окна, и мы добавляем к нему анимацию.

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

Можно задать разные анимации для появления и скрытия окна. Это делается с помощью параметров showClass и hideClass. Например:

Swal.fire({
  title: 'Пример кастомной анимации',
  text: 'Окно появляется с увеличением и исчезает с эффектом уменьшения.',
  showClass: {
    popup: 'animate__animated animate__zoomIn'
  },
  hideClass: {
    popup: 'animate__animated animate__zoomOut'
  }
});

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

Применение нескольких анимаций

Иногда возникает потребность использовать несколько анимаций одновременно. Это можно сделать, комбинируя их с помощью нескольких CSS-свойств. Например, добавление анимации для перемещения и появления элемента:

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

.swal2-show {
  animation: slideAndFadeIn 0.6s ease-out forwards;
}

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

Анимации для различных элементов окна

Можно кастомизировать анимации не только для всего окна, но и для отдельных элементов, таких как заголовок, текст, кнопки или иконки. Для этого можно использовать более специфичные селекторы в CSS. Например, чтобы анимировать кнопку «Ок», можно добавить следующее правило:

.swal2-confirm {
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

Это создаст эффект подпрыгивания для кнопки.

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

Продолжительность анимации можно настраивать с помощью свойства animation-duration. В зависимости от выбранного эффекта, можно увеличить или уменьшить время анимации, чтобы она смотрелась более плавно или резко. Например:

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

.swal2-show {
  animation: fadeIn 1s ease-in-out;
}

В данном случае анимация будет длиться одну секунду и будет применяться к появлению окна, плавно увеличивая его прозрачность.

Важные моменты

  • Совместимость браузеров: При использовании кастомных анимаций важно проверять совместимость с различными браузерами. Для этого часто применяются префиксы (-webkit-, -moz-, -ms- и т. д.), которые обеспечивают поддержку анимаций в разных версиях браузеров.

  • Производительность: Сложные анимации могут повлиять на производительность, особенно при использовании тяжелых эффектов или при многократном появлении окон на одной странице. Рекомендуется использовать легкие и быстрые анимации для улучшения восприятия.

  • Согласованность с дизайном: При кастомизации анимаций важно учитывать общий стиль и концепцию проекта. Не стоит перегружать интерфейс слишком яркими или длительными анимациями, которые могут отвлекать пользователя от основной задачи.

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

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

@keyframes complexAnimation {
  0% {
    transform: rotate(0deg) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: rotate(180deg) scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

.swal2-show {
  animation: complexAnimation 1.2s ease-out forwards;
}

Это добавит к окну анимацию, которая включает вращение, изменение размера и постепенное появление.

Заключение

Использование кастомных анимаций с помощью CSS в SweetAlert открывает большие возможности для создания уникальных и запоминающихся пользовательских интерфейсов. Правильное использование анимаций позволяет усилить визуальное восприятие, сделать интерфейс более живым и динамичным. Однако важно соблюдать баланс, чтобы анимации не становились чрезмерно навязчивыми или мешали функциональности интерфейса.

Оглавление