Как сделать анимацию появления блока в 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.

@edyth 

Дополнение к ответу: В AngularJS 1.8+ вы можете использовать модуль ngAnimateCSS для создания анимаций на основе CSS классов. Вот пример, как использовать этот модуль для анимации появления блока:

1. Установите модуль ngAnimateCSS:

1

npm install angular-animate-css

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

1

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.fade-in {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

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

1

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

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

В этом примере анимация появления блока будет использовать свойства анимации определенные в CSS классе "fade-in". Вы можете изменить классы и свойства анимации в зависимости от ваших потребностей.