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

Пользователь

от edyth , в категории: JavaScript , 9 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от greyson , 9 месяцев назад

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