Перестройка галереи: FLIP, layout и View Transitions
Фильтрация и раскрытие карточек должны сохранять ощущение ориентации: пользователь видит, куда делись элементы и откуда появился новый вид.
Пример: Oxiy Mobile App · Открыть разбор →
Результат
Вы спроектируете переход для фильтра галереи или открытия детали карточки. Его задача — не впечатлить, а сохранить контекст: выбранная карточка остаётся узнаваемой, сетка не прыгает, а повторное переключение не ломает интерфейс. FLIP описывает последовательность First, Last, Invert, Play: измерить старое положение, применить новое состояние, компенсировать разницу и проиграть переход. React Motion layout и нативный View Transition API решают похожие задачи разными средствами; в нашем Laravel/vanilla JS интерфейсе сначала нужен обычный переход и feature detection.
Не смешивайте механизмы без причины. Если достаточно обычного fade для новой страницы, снимки View Transition API будут проще FLIP-измерений. Если сетка меняется много раз в одном документе, важно, чтобы переход можно было прервать: пользователь не должен ждать окончания прежней анимации, чтобы сменить фильтр снова.
Шаги
- Реализуйте фильтр без анимации и убедитесь, что порядок, счётчик и пустое состояние корректны.
- Решите, что должно сохранять идентичность: карточка, обложка, заголовок или активная вкладка.
- Для FLIP измеряйте элементы до и после смены класса, затем анимируйте только transform.
- Для View Transitions вызывайте API только после проверки
document.startViewTransition; без него сразу обновляйте DOM. - Проверяйте быстрые переключения, изменение ширины и клавиатурный фокус.
Применимый prompt
Опиши переход фильтра галереи: что остаётся на месте, что уходит, что появляется и какой статичный fallback нужен без View Transition API.
Критерий проверки
Фильтр остаётся функциональным без перехода, а при включённом переходе пользователь может быстро менять условия без рывков и потери фокуса.
