🟢 Простые Анимации

Информация

Это первое из двух заданий по анимации, цель этой серии - освоить анимацию в Angular.

Хорошо продуманная анимация может сделать ваше приложение более увлекательным и простым в использовании. Анимация может улучшить ваше приложение и пользовательский опыт несколькими способами:

• Без анимации переходы между веб-страницами могут казаться резкими и раздражающими.
• Движение значительно улучшает взаимодействие с пользователем, поэтому анимация дает возможность определить реакцию приложения на действия пользователей.
• Хорошая анимация интуитивно привлекает внимание пользователя к тому месту, где это необходимо.

Я бы порекомендовал вам ознакомиться с официальной документацией. Вы узнаете все, что необходимо для успешного прохождения испытания.

В противном случае посмотрите на этот рабочий пример и git repo, чтобы вдохновиться.

Пояснение

Цель этой задачи - добавить анимацию, она должна запускаться, когда пользователь заходит на страницу или перезагружает страницу.

Constraints

• Не используйте никакой CSS и используйте интегрированный в Angular API @angular/animations.
• Не запускайте анимацию кнопкой, как в примерах, запускайте когда пользователь заходит на страницу или перезагружает ее.

Уровень 1

Добавьте анимацию затухания или перемещения для абзацев с левой стороны.

Уровень 2

Добавьте пошаговую (stagger) анимацию для списка справа.