Анимации AngularJS

С помощью CSS AngularJS предоставляет анимационные переходы.

Что такое анимация?

Анимация - это преобразование HTML-элементов, которое создает иллюзию движения.

instance

Отметьте флажок, чтобы скрыть DIV:

<body ng-app="ngAnimate">
Скрыть DIV：<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

Попробуйте сами

Приложение не должно быть забито анимациями, но некоторые анимации могут сделать приложение более понятным.

Что нужно?

Чтобы подготовить ваше приложение к анимации, вам необходимо включить библиотеку AngularJS Animate:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

Затем, вы должны ссылаться на него в приложении ngAnimate Модуль:

<body ng-app="ngAnimate">

Или, если у вашего приложения есть имя, установите ngAnimate Добавьте в качестве зависимости модуля приложения:

instance

<body ng-app="myApp">
<h1>Скрыть DIV：<input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

Попробуйте сами

Что такое ngAnimate?

ngAnimate модуль добавляет и удаляет классы.

ngAnimate Модуль не анимирует ваши HTML-элементы, но когда ngAnimate Обратите внимание, что при возникновении некоторых событий (например, скрытие или отображение HTML-элемента) элемент получает некоторые предварительно определенные классы, которые можно использовать для создания анимации.

Инструкции для добавления и удаления классов в AngularJS включают:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-show и ng-hide Инструкции добавляют или удаляют ng-hide Значения классов.

Другие инструкции добавляют их при входе в DOM ng-enter значения классов, и добавят их, когда элемент будет удален из DOM ng-leave атрибуты.

Когда элемент HTML изменяет положениеng-repeat Инструкции также добавят ng-move Значения классов.

Кроме того, в процессе анимации у HTML-элемента будет набор значений классов, которые будут удалены после завершения анимации. Например:ng-hide Инструкции добавят эти значения классов:

  • ng-animate
  • ng-hide-animate
  • ng-hide-add(Если нужно скрыть элемент)
  • ng-hide-remove(Если нужно показать элемент)
  • ng-hide-add-active(Если нужно скрыть элемент)
  • ng-hide-remove-active(Если нужно показать элемент)

Анимация с использованием CSS

Мы можем использовать CSS-транзиты или CSS-анимацию для добавления анимационных эффектов к элементам HTML. В этом руководстве мы покажем вам оба.

Чтобы узнать больше о CSS-анимации, изучите наши уроки по CSS-транзитам и CSS-анимации.

CSS-транзиты

CSS-транзиты позволяют вам в течение заданного времени平滑地将 значение CSS-атрибута изменить с одного на другое:

instance

when the DIV element gets .ng-hide В классе, переход将持续 0.5 секунды, высота будет плавно переходить от 100px к 0:

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

Попробуйте сами

CSS анимации

CSS анимации позволяют平滑地 изменять значение CSS свойства в течение заданного времени:

instance

when the DIV element gets .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

Попробуйте сами