Движение

Скорость и характер движения в SIMAI Framework заданы переменными на :root: три длительности и четыре кривые. Классы переходов и анимаций, а также компоненты читают эти переменные, поэтому скорость меняется в одном месте.

Когда применять

Откройте эту страницу, когда элементу нужен плавный переход, когда проект хочет ускорить или замедлить движение во всём интерфейсе или когда своему компоненту нужна та же кривая, что у компонентов Framework.

Переменные

Появление и исчезновение — разные кривые: слой, который уходит по той же кривой, по которой пришёл, кажется медленнее, чем он есть.

Что включает переход

Ядро не задаёт переход всем элементам: без класса свойство меняется сразу. Переход включает класс:

• transition, transition-colors, transition-opacity, transition-transform и другие классы свойства перехода берут длительность --sf-duration-normal и кривую --sf-ease-move;
• duration-fast, duration-normal, duration-slow задают длительность одной из переменных; без класса свойства переход охватывает все свойства. На один элемент с классом transition-* их не ставят: оба задают длительность, и победитель зависит от порядка таблиц стилей — меняйте длительность переменной, как в примере ниже;
• animation запускает анимацию плавного появления с длительностью --sf-duration-normal и кривой --sf-animation; animation-duration-fast, animation-duration-normal и animation-duration-slow меняют её длительность.

Кривые --sf-ease-enter и --sf-ease-exit классов не имеют: их берут компоненты, у которых есть появление и уход, — например, уведомления и выдвижная панель. В своём CSS используйте их так же.

Ядро не выключает движение по системной настройке «уменьшить движение». Если проекту это нужно, задайте правило сами — пример ниже.

Пример

Наведите указатель на плашки: цвет меняется с разной длительностью.

<div class="flex flex-wrap gap-4 items-end">
  <div class="flex flex-col gap-1 items-center">
    <div class="p-x-4 p-y-3 radius-surface bg-surface-container hover:bg-primary-container duration-fast">Наведите</div>
    <code class="text-1/2 color-on-surface-variant">duration-fast</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <div class="p-x-4 p-y-3 radius-surface bg-surface-container hover:bg-primary-container duration-normal">Наведите</div>
    <code class="text-1/2 color-on-surface-variant">duration-normal</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <div class="p-x-4 p-y-3 radius-surface bg-surface-container hover:bg-primary-container duration-slow">Наведите</div>
    <code class="text-1/2 color-on-surface-variant">duration-slow</code>
  </div>
</div>

Переход в своём CSS — те же переменные:

.project-panel {
    transition: transform var(--sf-duration-normal) var(--sf-ease-enter);
}
.project-panel--closing {
    transition-timing-function: var(--sf-ease-exit);
}

Скорость во всём проекте или в одном блоке меняется переопределением переменной. Всё, что внутри читает --sf-duration-normal, становится медленнее:

.project-onboarding {
    --sf-duration-normal: var(--sf-duration-slow);
}

Движение по системной настройке:

@media (prefers-reduced-motion: reduce) {
    :root {
        --sf-duration-fast: 0s;
        --sf-duration-normal: 0s;
        --sf-duration-slow: 0s;
    }
}