vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 21:03:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #677 from webbomj/translate-46-simple-animation

Browse Source 
docs(ru): added translate for 46 challenge
This commit is contained in:
Laforge Thomas
2024-03-12 23:20:01 +01:00
committed by GitHub
parent f3733387b1 ec4eae4005
commit 486fca8984
1 changed files with 48 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/src/content/docs/ru/challenges/angular/46-simple-animations.md Normal file
View File

@@ -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>