Шпаргалка: Анимации

Главное по теме Анимации

В теме «Анимации» теория связана с наблюдаемым результатом. Для темы «Анимации» предметный результат подтверждается так: включите prefers-reduced-motion и проверить состояние до и после эффекта. Перед переносом «Анимации» в проект выполните проверку: включите prefers-reduced-motion и проверить состояние до и после эффекта. Шпаргалку «Анимации» можно распечатать или сохранить в PDF через системный диалог печати.

Минимальный шаблон

<article class="card">
  <h2>Анимации</h2>
  <p>Содержимое компонента</p>
</article>

Чек-лист Анимации

• Включите prefers-reduced-motion и проверить состояние до и после эффекта применительно к теме «Анимации»
• Сопоставьте результат «Анимации» с целью «показать изменение состояния, не мешая чтению и управлению» и объясните каждое использованное условие
• Повторите проверку «Анимации» с другими данными и убедитесь, что исключён риск: движение не должно быть единственным способом сообщить об изменении
• Исключены: Движение не должно быть единственным способом сообщить об изменении — это предметный риск для «Анимации»

Как применять шпаргалку

Создайте два варианта «Анимации» в минимальном компоненте: корректный и содержащий риск «движение не должно быть единственным способом сообщить об изменении». Объясните различие вариантов «Анимации» по наблюдаемому результату. Шпаргалка «Анимации» напоминает последовательность, но не заменяет проверку требований конкретного интерфейса.