Анимации открытия и закрытия

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

Стандартное поведение

По умолчанию, BasicLightbox отображает окно с модальным контентом без анимаций, просто вставляя HTML-элемент в DOM. Это делает библиотеку простой и быстрой, но в ряде случаев анимации могут значительно улучшить визуальное восприятие.

Пример базовой инициализации модального окна:

import * as basicLightbox from 'basiclightbox'

const instance = basicLightbox.create(`
  <img src="image.jpg" alt="A beautiful image">
`)

instance.show()

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

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

Для создания анимаций открытия и закрытия модальных окон в BasicLightbox можно использовать CSS. Модальное окно создаётся с помощью JavaScript, но анимации можно полностью настроить через стили.

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

.basicLightbox {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.basicLightbox--visible {
  opacity: 1;
  transform: scale(1);
}

В данном примере модальное окно изначально будет невидимым и уменьшенным. Когда оно становится видимым (когда добавляется класс .basicLightbox--visible), оно будет плавно увеличиваться в размере и становиться полностью видимым.

Чтобы задействовать эти анимации, необходимо добавить обработку классов на момент отображения окна.

import * as basicLightbox from 'basiclightbox'

const instance = basicLightbox.create(`
  <div class="basicLightbox">
    <img src="image.jpg" alt="A beautiful image">
  </div>
`)

const openWithAnimation = () => {
  const element = instance.element();
  setTimeout(() => {
    element.classList.add('basicLightbox--visible');
  }, 10); // Задержка для активации анимации
  instance.show();
}

openWithAnimation();

Здесь мы добавляем задержку перед добавлением класса .basicLightbox--visible, чтобы позволить анимации начать работать.

Анимация закрытия

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

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

Пример анимации для закрытия окна:

const closeWithAnimation = () => {
  const element = instance.element();
  element.classList.remove('basicLightbox--visible');
  setTimeout(() => {
    instance.close();
  }, 300); // Задержка, соответствующая длительности анимации
}

closeWithAnimation();

Здесь мы сначала убираем класс .basicLightbox--visible, который делает окно видимым, а затем через заданное время (300 мс) закрываем окно. Это время должно совпадать с длительностью анимации, чтобы окно не исчезло мгновенно.

Модификация анимаций через JavaScript

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

Пример изменения длительности анимации через Jav * aScript:

const instance = basicLightbox.create(`
  <div class="basicLightbox">
    <img src="image.jpg" alt="A beautiful image">
  </div>
`)

const openWithCustomDuration = (duration) => {
  const element = instance.element();
  element.style.transitionDuration = `${duration}s`;
  setTimeout(() => {
    element.classList.add('basicLightbox--visible');
  }, 10);
  instance.show();
}

openWithCustomDuration(0.5); // Задать длительность анимации 0.5 секунды

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

Анимации с использованием JavaScript-библиотек

Если стандартных CSS-анимаций недостаточно, можно использовать JavaScript-библиотеки, такие как GSAP (GreenSock Animation Platform) для создания более сложных и динамичных анимаций.

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

import gsap from 'gsap'

const instance = basicLightbox.create(`
  <div class="basicLightbox">
    <img src="image.jpg" alt="A beautiful image">
  </div>
`)

const openWithGSAP = () => {
  const element = instance.element();
  gsap.fromTo(element, { opacity: 0, scale: 0.8 }, { opacity: 1, scale: 1, duration: 0.5 });
  instance.show();
}

const closeWithGSAP = () => {
  const element = instance.element();
  gsap.to(element, { opacity: 0, scale: 0.8, duration: 0.5, onComplete: () => instance.close() });
}

openWithGSAP();

Здесь мы используем GSAP для плавного увеличения масштаба и изменения прозрачности элемента при открытии и закрытии окна. GSAP предоставляет более гибкие и мощные возможности для создания анимаций по сравнению с чистым CSS.

Итоговая настройка анимаций

В процессе работы с библиотекой BasicLightbox можно комбинировать различные способы анимации: от простых CSS-аниматоров до сложных решений с использованием JavaScript-библиотек. Важно, чтобы анимации не только улучшали визуальную привлекательность интерфейса, но и не замедляли взаимодействие пользователя с сайтом. Сбалансированное использование анимаций, которые сочетаются с общей концепцией дизайна, поможет создать удобный и приятный опыт для конечного пользователя.

Оглавление