Параметр closeSpeed

Библиотека Featherlight предоставляет легковесный способ создания модальных окон (lightbox) на веб-страницах. Одним из ключевых аспектов управления поведением окна является анимация его закрытия. Параметр closeSpeed отвечает за скорость этой анимации, позволяя тонко настраивать пользовательский опыт.

Определение и назначение

closeSpeed — это числовой параметр, задающий длительность анимации закрытия окна в миллисекундах. Он определяет, насколько быстро или медленно исчезает модальное окно после вызова метода закрытия (close()) или после действия пользователя, инициирующего закрытие (например, клик по кнопке закрытия или фону).

Пример базовой настройки:

$.featherlight('#modal-content', {
    closeSpeed: 300
});

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

Влияние на пользовательский опыт

  • Короткая анимация (например, 100–200 мс) создаёт ощущение мгновенного отклика, но может выглядеть резкой и слегка дерганой.
  • Средняя анимация (300–500 мс) оптимальна для большинства интерфейсов — окно закрывается плавно, не задерживая пользователя.
  • Длительная анимация (500–1000 мс и выше) создаёт эффект «затухания» и может использоваться для акцентирования важного контента, но при чрезмерной длительности становится раздражающей.

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

Настройка через глобальные опции

closeSpeed может быть установлен для отдельных экземпляров Featherlight или глобально для всей страницы через объект настроек $.featherlight.defaults:

// Глобальная установка
$.featherlight.defaults.closeSpeed = 400;

// Локальная установка для конкретного окна
$('#open-modal').featherlight({
    closeSpeed: 600
});

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

Взаимодействие с другими параметрами анимации

Параметр closeSpeed тесно связан с другими опциями Featherlight:

  • openSpeed — скорость открытия окна. Рекомендуется поддерживать согласованное соотношение открытие/закрытие для гармоничной анимации.
  • afterClose и beforeClose — колбэки, вызываемые соответственно после и перед закрытием. Значение closeSpeed определяет, через какое время выполнятся эти функции.

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

$.featherlight('#modal', {
    closeSpeed: 500,
    beforeClose: function(event) {
        console.log('Начало анимации закрытия');
    },
    afterClose: function(event) {
        console.log('Модальное окно закрыто');
    }
});

Здесь beforeClose срабатывает сразу, а afterClose — через 500 мс, по завершении анимации.

Управление анимацией через CSS

Хотя closeSpeed управляет временной характеристикой анимации, Featherlight поддерживает CSS-анимации через класс .featherlight. В таком случае closeSpeed определяет задержку или синхронизацию с JavaScript-анимацией:

.featherlight {
    transition: opacity 0.5s ease;
}

В этом примере значение closeSpeed должно соответствовать 500 мс, чтобы события afterClose срабатывали синхронно с визуальной анимацией. Несовпадение может приводить к эффекту «резкого исчезновения», когда окно исчезает раньше, чем закончится CSS-переход.

Динамическая смена скорости закрытия

В некоторых случаях требуется изменить скорость закрытия во время выполнения, например, в зависимости от типа контента. Featherlight позволяет это делать через метод $.featherlight.current():

var fl = $.featherlight.current();
fl.options.closeSpeed = 800;
fl.close();

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

Практические рекомендации

  • Для большинства интерфейсов достаточно значения 300–400 мс.
  • Длительные анимации целесообразны только для презентационных или медиа-галерей.
  • Если используется CSS-анимация, closeSpeed следует синхронизировать с продолжительностью CSS-перехода.
  • В динамически создаваемых модальных окнах удобно менять closeSpeed в зависимости от контента, избегая однообразия.

Параметр closeSpeed является мощным инструментом тонкой настройки поведения Featherlight, обеспечивая контроль над визуальной плавностью и синхронизацией закрытия окон. Его грамотная настройка повышает комфорт взаимодействия и визуальную согласованность интерфейса.

Оглавление