Параметры showClass и hideClass

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

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

Синтаксис

Swal.fire({
  title: 'Успешно!',
  text: 'Ваше сообщение отправлено.',
  showClass: {
    popup: 'animated fadeInUp'
  }
});

В данном примере при появлении окна будет применяться анимация fadeInUp из библиотеки анимаций, например, из Animate.css. Это означает, что окно будет плавно появляться, начиная с нижней части экрана и поднимаясь вверх.

Параметр showClass является объектом, и в нем ключи представляют собой CSS-селекторы, к которым применяются анимации. Наиболее часто используется popup, который относится к самому всплывающему окну.

Возможности настройки анимаций

Анимации, которые можно использовать в showClass, зависят от выбранной библиотеки или собственных стилей. Используя внешний набор анимаций, такой как Animate.css или другие, можно добавить такие эффекты как:

  • fadeIn
  • bounceIn
  • zoomIn
  • flipInX
  • lightSpeedIn

Каждая из этих анимаций имеет свои особенности. Например, fadeIn создает плавный эффект появления, а bounceIn добавляет эффект подскока.

Параметр hideClass

Параметр hideClass аналогичен showClass, но отвечает за стили и анимации, применяемые к окну при его закрытии. Этот параметр позволяет задать, как именно окно будет скрываться после того, как пользователь закроет уведомление.

Синтаксис

Swal.fire({
  title: 'Ошибка!',
  text: 'Произошла ошибка при отправке.',
  hideClass: {
    popup: 'animated fadeOutDown'
  }
});

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

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

Возможности настройки анимаций для скрытия

Анимации для скрытия окна могут быть разнообразными и включать такие эффекты как:

  • fadeOut
  • zoomOut
  • flipOutX
  • slideOutUp
  • bounceOut

Каждая из этих анимаций имеет свои особенности. Например, fadeOut создаёт плавный эффект исчезновения, а zoomOut уменьшает размер окна перед тем, как оно исчезнет.

Пример использования с кастомными анимациями

Swal.fire({
  title: 'Пример анимации',
  text: 'Это окно с кастомной анимацией появления и исчезновения.',
  showClass: {
    popup: 'animated bounceInLeft'
  },
  hideClass: {
    popup: 'animated bounceOutRight'
  }
});

В этом примере при открытии окна будет использоваться анимация bounceInLeft, а при закрытии — bounceOutRight. Такое сочетание создаёт эффект “прыжка” слева и исчезновения вправо, что добавляет динамики и улучшает визуальное восприятие.

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

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

Пример CSS-анимации

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

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

.customShowClass {
  animation: customShow 0.5s ease-out;
}

.customHideClass {
  animation: customHide 0.5s ease-in;
}

Здесь создаются две анимации: customShow для появления и customHide для исчезновения. Далее можно использовать эти классы в параметрах showClass и hideClass:

Swal.fire({
  title: 'Custom Анимация',
  text: 'Это окно с кастомными анимациями.',
  showClass: {
    popup: 'customShowClass'
  },
  hideClass: {
    popup: 'customHideClass'
  }
});

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

Заключение

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

Оглавление