Motion: состояния вместо случайного движения
Движение полезно, когда объясняет изменение состояния: вход, hover, раскрытие, исчезновение или смену данных.
Пример: Kova Mobile App · Открыть разбор →
Результат
Вы опишете одну карточку или панель как набор состояний: обычное, наведённое, открытое и скрытое. Это полезнее, чем начинать с эффектного таймлайна: движение объясняет, что изменилось после действия пользователя. Для нашего Laravel-интерфейса первым выбором остаются CSS transitions и небольшой vanilla JavaScript. React Motion — отдельная библиотека и пример декларативного API, а не зависимость, которую нужно незаметно добавить в проект.
Полезное ограничение: не анимируйте одновременно ширину, высоту, цвет, тень, фон и положение. Начните с одного визуального сигнала. Чем проще состояние, тем легче его остановить, повторить и проверить на мобильном устройстве. Содержимое и действие должны быть готовы сразу; переход лишь делает смену менее резкой.
Шаги
- Назовите событие: пользователь навёл курсор, нажал кнопку, открыл карточку или сменил фильтр. Если события нет, анимация, вероятно, декоративная.
- Опишите начальное и конечное состояния словами: непрозрачен/прозрачен, сдвинут/на месте, свёрнут/развёрнут. Начните с opacity и transform.
- Дайте каждому переходу короткую длительность и одинаковую кривую в пределах одного компонента.
- При удалении содержимого не обрывайте его мгновенно: сначала завершите визуальный выход, затем меняйте DOM.
- Проверьте клавиатурный фокус и быстрые повторные нажатия: движение не должно блокировать действие.
Применимый код
.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 и без наведения карточка остаётся полной и понятной.
