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

Featherlight использует CSS-переходы и JavaScript-тайминги для управления визуальным появлением и скрытием lightbox-окна. Вся анимация строится вокруг добавления и удаления CSS-классов в момент открытия и закрытия, а также параметров скорости, задаваемых в конфигурации плагина.

Ключевой принцип: JavaScript отвечает за жизненный цикл, CSS — за визуальное поведение.

Стандартная анимация появления и скрытия

По умолчанию Featherlight применяет плавное изменение прозрачности (fade).

Основные параметры:

$.featherlight(content, {
    openSpeed: 250,
    closeSpeed: 250
});
  • openSpeed — длительность анимации открытия (в миллисекундах)
  • closeSpeed — длительность анимации закрытия

Эти значения напрямую управляют CSS-переходами, применяемыми к контейнеру .featherlight-content.

CSS-основа анимации

Featherlight не жёстко зашивает анимации в JavaScript. Вместо этого используется минимальный набор CSS-правил:

.featherlight {
    transition: opacity 0.25s;
    opacity: 0;
}

.featherlight.featherlight-open {
    opacity: 1;
}

Класс .featherlight-open добавляется в момент завершения инициализации окна. Удаление этого класса запускает обратную анимацию.

Важно: скорость перехода должна совпадать со значением openSpeed и closeSpeed, иначе визуальное состояние может рассинхронизироваться с логикой закрытия.

Анимация контента отдельно от оверлея

Оверлей и контент — разные элементы DOM:

  • .featherlight — затемнение фона
  • .featherlight-content — само окно

Это позволяет анимировать их независимо:

.featherlight-content {
    transform: scale(0.95);
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 0;
}

.featherlight-open .featherlight-content {
    transform: scale(1);
    opacity: 1;
}

Такой подход даёт эффект zoom-in при открытии и zoom-out при закрытии без изменения JavaScript-кода.

Использование параметра variant

Featherlight поддерживает параметр variant, который добавляет модификатор-класс:

$.featherlight(content, {
    variant: 'zoom'
});

HTML-структура:

<div class="featherlight featherlight-zoom">

CSS-реализация:

.featherlight-zoom .featherlight-content {
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s ease;
}

.featherlight-zoom.featherlight-open .featherlight-content {
    transform: scale(1);
    opacity: 1;
}

variant — основной инструмент для создания нескольких типов анимаций в одном проекте без дублирования логики.

Анимации закрытия: управление направлением и фазами

Закрытие происходит в два этапа:

  1. Удаление класса .featherlight-open
  2. Ожидание closeSpeed
  3. Удаление DOM-элемента

Это позволяет безопасно использовать сложные анимации:

.featherlight-content {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.featherlight:not(.featherlight-open) .featherlight-content {
    transform: translateY(20px);
    opacity: 0;
}

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

JavaScript-хуки жизненного цикла

Для синхронизации анимаций с логикой доступны колбэки:

  • beforeOpen
  • afterOpen
  • beforeClose
  • afterClose

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

$.featherlight(content, {
    beforeOpen: function () {
        this.$content.addClass('is-animating');
    },
    afterClose: function () {
        this.$content.removeClass('is-animating');
    }
});

Колбэки полезны при:

  • каскадных анимациях
  • управлении состоянием страницы
  • интеграции с внешними библиотеками анимации

Keyframes-анимации вместо transition

Featherlight не ограничивает использование @keyframes:

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.featherlight-open .featherlight-content {
    animation: slideUp 0.4s ease forwards;
}

Для закрытия используется обратная логика через отсутствие класса .featherlight-open.

Особенность: при использовании animation рекомендуется увеличивать closeSpeed, чтобы DOM не удалялся раньше завершения keyframes.

Согласование с prefers-reduced-motion

Корректная реализация анимаций учитывает системные настройки пользователя:

@media (prefers-reduced-motion: reduce) {
    .featherlight,
    .featherlight-content {
        transition: none;
        animation: none;
    }
}

Featherlight не включает это поведение по умолчанию, но легко расширяется через CSS.

Каскадные и составные анимации

Возможна поэтапная анимация элементов внутри окна:

.featherlight-open .featherlight-content > * {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.3s ease forwards;
}

.featherlight-open .featherlight-content > *:nth-child(2) {
    animation-delay: 0.1s;
}

Такой приём создаёт ощущение «живого» интерфейса без вмешательства в код плагина.

Практические ограничения и особенности

  • Featherlight не ждёт завершения CSS-анимации, он ориентируется на openSpeed и closeSpeed
  • Любая анимация должна укладываться во временные рамки этих параметров
  • Сложные эффекты рекомендуется реализовывать через CSS, а не JavaScript
  • Использование transform предпочтительнее top/left из-за аппаратного ускорения

Архитектурный подход к анимациям

Оптимальная схема:

  • JavaScript — управление состояниями и таймингами
  • CSS — визуальные эффекты
  • variant — композиция и масштабирование решений
  • хуки — интеграция с остальной логикой приложения

Такой подход делает анимации Featherlight предсказуемыми, расширяемыми и не привязанными к конкретной реализации интерфейса.

Оглавление