Анимации AngularJS

AngularJS предоставляет анимационные эффекты, которые можно использовать с CSS.

Чтобы использовать анимации, AngularJS требует библиотеку angular-animate.min.js.

<script src="../libs/angular.js/1.4.6/angular-animate.min.js.html"></script>

Вам также нужно использовать модуль ngAnimate в вашем приложении:

<body ng-app="ngAnimate">

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

Анимации — это динамически изменяющиеся эффекты, создаваемые путём изменения HTML-элементов.

Пример

Установите флажок, чтобы скрыть DIV:

<body ng-app="ngAnimate">

Скрыть DIV:<input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck"></div>

</body>

Попробуйте сами »
Note Анимации не следует использовать слишком часто в приложениях, но уместное использование анимаций может обогатить страницу и сделать её более понятной для пользователей.

Если в нашем приложении уже задано имя приложения, мы можем напрямую добавить ngAnimate в модуль:

Пример

<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-элементов. Если событие происходит, 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значений классов.

Другие директивы добавятng-enterклассы при входе в DOM, а при удалении из 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-свойства на другое:

Пример

Когда для элемента DIV установлен.ng-hideкласс, переход занимает 0.5 секунды, изменяя height с 100px на 0:

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

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

CSS-анимации

CSS-анимации позволяют плавно изменять значения CSS-свойств:

Пример

Когда для элемента DIV установлен.ng-hideкласс,myChangeанимация выполнится, плавно изменяя высоту с 100px до 0:

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

Попробуйте сами »
Другие расширения