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

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

Название

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

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

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

## Результат

Вы опишете одну карточку или панель как набор состояний: обычное, наведённое, открытое и скрытое. Это полезнее, чем начинать с эффектного таймлайна: движение объясняет, что изменилось после действия пользователя. Для нашего Laravel-интерфейса первым выбором остаются CSS transitions и небольшой vanilla JavaScript. React Motion — отдельная библиотека и пример декларативного API, а не зависимость, которую нужно незаметно добавить в проект.

Полезное ограничение: не анимируйте одновременно ширину, высоту, цвет, тень, фон и положение. Начните с одного визуального сигнала. Чем проще состояние, тем легче его остановить, повторить и проверить на мобильном устройстве. Содержимое и действие должны быть готовы сразу; переход лишь делает смену менее резкой.

## Шаги

1. Назовите событие: пользователь навёл курсор, нажал кнопку, открыл карточку или сменил фильтр. Если события нет, анимация, вероятно, декоративная.
2. Опишите начальное и конечное состояния словами: непрозрачен/прозрачен, сдвинут/на месте, свёрнут/развёрнут. Начните с opacity и transform.
3. Дайте каждому переходу короткую длительность и одинаковую кривую в пределах одного компонента.
4. При удалении содержимого не обрывайте его мгновенно: сначала завершите визуальный выход, затем меняйте DOM.
5. Проверьте клавиатурный фокус и быстрые повторные нажатия: движение не должно блокировать действие.

## Применимый код

```css
.card { transition: transform 180ms ease, opacity 180ms ease; }
.card:hover, .card:focus-within { transform: translateY(-2px); }
.card.is-leaving { opacity: 0; transform: translateY(8px); }
```

Если переход не помогает назвать новое состояние, сократите его до статичного изменения.

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

Каждая анимация отвечает на вопрос «что произошло?», а при отключённом JavaScript и без наведения карточка остаётся полной и понятной.

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

- [Motion component](https://motion.dev/docs/react-motion-component)
- [AnimatePresence](https://motion.dev/docs/react-animate-presence)

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

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

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

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