Как сделать анимацию появления блока в angular.js?

@edyth 

Для создания анимации появления блока в AngularJS можно использовать модуль ngAnimate. Этот модуль предоставляет несколько директив, которые можно использовать для добавления анимации к элементам.

Вот простой пример, который показывает, как сделать анимацию появления блока при помощи ngAnimate:

1. Добавьте модуль ngAnimate к своему приложению AngularJS:

1

angular.module('myApp', ['ngAnimate']);

1. Создайте CSS-классы для анимации. Например, для анимации появления можно использовать следующие классы:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.fade-in {
  opacity: 0;
}

.fade-in.ng-enter {
  transition: opacity 0.5s ease;
}

.fade-in.ng-enter-active {
  opacity: 1;
}

1. Добавьте директиву ng-if к элементу, который вы хотите анимировать:

1

<div ng-if="showBlock" class="fade-in">Текст блока</div>

1. Изменяйте значение переменной "showBlock", чтобы показать или скрыть блок. AngularJS автоматически добавит классы ng-enter и ng-enter-active при появлении элемента.

В этом примере при появлении блока будет использоваться анимация появления с непрозрачностию (opacity) в течение половины секунды. Вы можете изменить классы и свойства анимации, чтобы создать другие эффекты.

Примечание: ngAnimate был удален из AngularJS в версии 1.7 и заменен на модуль AngularJS Animation в AngularJS 1.8+. Если вы используете версию AngularJS 1.8+ , используйте модуль AngularJS Animation.