Редактировать материал

СОХРАНИ ВАЖНОЕ

Название

Направление Формат Статус

Коротко о главном

Markdown: ## заголовок · **жирный** · списки · код

## Результат

Вы спроектируете переход для фильтра галереи или открытия детали карточки. Его задача — не впечатлить, а сохранить контекст: выбранная карточка остаётся узнаваемой, сетка не прыгает, а повторное переключение не ломает интерфейс. FLIP описывает последовательность First, Last, Invert, Play: измерить старое положение, применить новое состояние, компенсировать разницу и проиграть переход. React Motion `layout` и нативный View Transition API решают похожие задачи разными средствами; в нашем Laravel/vanilla JS интерфейсе сначала нужен обычный переход и feature detection.

Не смешивайте механизмы без причины. Если достаточно обычного fade для новой страницы, снимки View Transition API будут проще FLIP-измерений. Если сетка меняется много раз в одном документе, важно, чтобы переход можно было прервать: пользователь не должен ждать окончания прежней анимации, чтобы сменить фильтр снова.

## Шаги

1. Реализуйте фильтр без анимации и убедитесь, что порядок, счётчик и пустое состояние корректны.
2. Решите, что должно сохранять идентичность: карточка, обложка, заголовок или активная вкладка.
3. Для FLIP измеряйте элементы до и после смены класса, затем анимируйте только transform.
4. Для View Transitions вызывайте API только после проверки `document.startViewTransition`; без него сразу обновляйте DOM.
5. Проверяйте быстрые переключения, изменение ширины и клавиатурный фокус.

## Применимый prompt

```text
Опиши переход фильтра галереи: что остаётся на месте, что уходит, что появляется и какой статичный fallback нужен без View Transition API.
```

## Критерий проверки

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

### Источники

- [Flip — GSAP](https://gsap.com/docs/v3/Plugins/Flip/)
- [View Transition API — Chrome for Developers](https://developer.chrome.com/docs/web-platform/view-transitions?hl=en)
- [Layout animation — Motion](https://motion.dev/docs/react-layout-animations)

Следующий шаг Ссылка на источникСама ссылка требует интернета. Важное содержание сохраните в тексте или вложении.

Изображения, GIF, видео и PDF

До 6 файлов за одно сохранение, до 100 МБ каждый. Файлы сохраняются на компьютере.

Сохранение по кнопкеОтмена