Skip to content

Commit

Permalink
Merge pull request #677 from webbomj/translate-46-simple-animation
Browse files Browse the repository at this point in the history
docs(ru): added translate for 46 challenge
  • Loading branch information
tomalaforge authored Mar 12, 2024
2 parents f373338 + ec4eae4 commit 486fca8
Showing 1 changed file with 48 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
title: 🟢 Простые Анимации
description: Задача 46 заключается в изучении animation API интегрированного в Angular
author: sven-brodny
contributors:
- webbomj
challengeNumber: 46
command: angular-simple-animations
sidebar:
order: 17
---

## Информация

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

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

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

Я бы порекомендовал вам ознакомиться с [официальной документацией](https://angular.io/guide/animations). Вы узнаете все, что необходимо для успешного прохождения испытания.

В противном случае посмотрите на этот [рабочий пример](https://svenson95.github.io/ng-xmp-animations/) и [git repo](https://github.com/svenson95/ng-xmp-animations), чтобы вдохновиться.

## Пояснение

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

## Constraints

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

### Уровень 1

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

<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/a43c3995-16ef-4d1f-bcfc-602b4ce80937">
</video>

### Уровень 2

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

<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
</video>

0 comments on commit 486fca8

Please sign in to comment.