12.08.2019 в 04:53
LegGnom
Дружим Angular и Animate.css за пять простых шагов
![](/static/storage/30319986607105410636805945559377908298.gif)
Animate.css - это кросс-браузерная библиотека CSS-анимаций, которая невероятно проста в использовании.
В этой части я покажу вам, как настроить Animate.css для использования в Angular всего за пять шагов.
Шаг 1: Создайте свой проект
Если вы думаете об использовании Animate.css в своем проекте Angular, возможно, у вас уже есть инициализированный проект. Однако для этого урока давайте начнем наш проект с нуля.
![](/static/storage/25568516435421860428725978991160254914.png)
Шаг 2. Установите Animate.css
![](/static/storage/318823594678298324563969390211421391032.png)
Шаг 3. Включите Animate.css
Есть несколько способов включить Animate.css в наш проект:
1. Откройте angular.json
и вставьте новую запись в массив styles:
![](/static/storage/122449475255035371375959595578503613663.png)
2. Откройте styles.css
и вставьте новую запись в файл:
![](/static/storage/31398665371377337964870816302574290824.png)
Шаг 4. Добавьте анимированный CSS-класс
Откройте компонент вашего шаблона и добавьте анимированный класс CSS в любой из элементов HTML:
![](/static/storage/18678367093305762708488197187296385354.png)
Шаг 5. Запустите ваше приложение!
ng serve