ДокументацияРазделы, компоненты, системы и их подразделы
Система движения
Иерархия, длительность и reduced motion
05 · Система движения
Анимация объясняет изменение состояния
Движение поддерживает причинно-следственную связь и иерархию. Оно не задерживает действие и не становится самостоятельным украшением.
Иерархия
Заметность соответствует важности изменения
Подтверждает важное изменение и удерживает контекст.
Показывает открытие, закрытие и перемещение элемента.
Допустимо только без конкуренции с задачей пользователя.
Токены
Длительность и easing задаются системно
80–500 msСистемная шкала длительности.
enterПоявление мягко замедляется.
exitИсчезновение не задерживает пользователя.
standardИзменение состояния остаётся нейтральным.
Переходы
Сначала меняется состояние, затем интерфейс его объясняет
SCSSСистемная длительность
.control {
transition:
color var(--ox-motion-duration-fast) var(--ox-motion-easing-standard),
background-color var(--ox-motion-duration-fast) var(--ox-motion-easing-standard);
}Снижение движения
Предпочтение пользователя важнее эффекта
При prefers-reduced-motion: reduce несущественное движение отключается. Изменение состояния, фокус и обратная связь при этом должны оставаться понятными.
SCSSДоступность движения
@media (prefers-reduced-motion: reduce) {
.control {
transition-duration: 0.01ms;
}
}