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

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

от edyth , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от greyson , год назад

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

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

от lamar , 3 месяца назад

@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". Вы можете изменить классы и свойства анимации в зависимости от ваших потребностей.