Улучшить эту документацию ngAnimate

ngAnimate

Модуль ngAnimate предоставляет поддержку для JavaScript, CSS3 переходов и CSS3 анимаций ключевых кадров внутри существующих основных и пользовательских директив.

Использование

Чтобы увидеть анимации в действии, необходимо определить соответствующие CSS-классы или зарегистрировать анимацию JavaScript с помощью функции myModule.animation(). Директивы, которые автоматически поддерживают анимации: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView и ngClass. Пользовательские директивы могут использовать анимации, используя сервис $animate.

Ниже представлено более подробное описание поддерживаемых событий анимации, предоставляемых существующими ng-директивами:

Дополнительную информацию об анимациях можно найти на странице каждой директивы.

Ниже приведен пример применения анимаций к директиве, которая поддерживает крючки анимации:

<style type="text/css">
.slide.ng-enter, .slide.ng-leave {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
}

.slide.ng-enter { }        /* starting animations for enter */
.slide.ng-enter.ng-enter-active { } /* terminal animations for enter */
.slide.ng-leave { }        /* starting animations for leave */
.slide.ng-leave.ng-leave-active { } /* terminal animations for leave */
</style>

<!--
the animate service will automatically add .ng-enter and .ng-leave to the element
to trigger the CSS transition/animations
-->
<ANY class="slide" ng-include="..."></ANY>

Обратите внимание, что по умолчанию, если выполняется анимация, до завершения анимации родительского элемента анимация дочерних элементов невозможна. Это ограничение можно обойти, поместив атрибут ng-animate-children на родительский контейнер.

<div class="slide-animation" ng-if="on" ng-animate-children>
<div class="fade-animation" ng-if="on">
  <div class="explode-animation" ng-if="on">
     ...
  </div>
</div>
</div>

Когда значение выражения on изменяется и запускается анимация, все элементы внутри неё будут анимированы без блокировки дочерних элементов.

CSS-определяемые анимации

Следующий код демонстрирует, как выполнять анимации с помощью CSS-переходов в Angular:

<style type="text/css">
/*
 The animate class is apart of the element and the ng-enter class
 is attached to the element once the enter animation event is triggered
*/
.reveal-animation.ng-enter {
 -webkit-transition: 1s linear all; /* Safari/Chrome */
 transition: 1s linear all; /* All other modern browsers and IE10+ */

 /* The animation preparation code */
 opacity: 0;
}

/*
 Keep in mind that you want to combine both CSS
 classes together to avoid any CSS-specificity
 conflicts
*/
.reveal-animation.ng-enter.ng-enter-active {
 /* The animation code itself */
 opacity: 1;
}
</style>

<div class="view-container">
  <div ng-view class="reveal-animation"></div>
</div>

Следующий код демонстрирует, как выполнять анимации с помощью CSS-анимаций в Angular:

<style type="text/css">
.reveal-animation.ng-enter {
  -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
  animation: enter_sequence 1s linear; /* IE10+ and Future Browsers */
}
@-webkit-keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
</style>

<div class="view-container">
  <div ng-view class="reveal-animation"></div>
</div>

CSS3 анимации и переходы могут быть использованы вместе, и сервис animate определит правильную продолжительность и задержку.

При изменении DOM сначала добавляется класс события (например, ng-enter), затем браузер готовится добавить активный класс (в данном случае ng-enter-active), что запускает анимацию. Модуль анимации автоматически обнаружит CSS-код для определения окончания анимации. После завершения анимации оба CSS-класса будут удалены из DOM. Если браузер не поддерживает CSS-переходы или CSS-анимации, анимация начнется и закончится сразу, что приведет к элементу DOM в его конечном состоянии. Конечное состояние – это когда к элементу DOM не применены классы CSS-переходов/анимаций.

CSS-анимации со ступенчатой задержкой

.my-animation.ng-enter {
/* standard transition code */
-webkit-transition: 1s linear all;
transition: 1s linear all;
opacity:0;
}
.my-animation.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;

/* in case the stagger doesn't work then these two values
 must be set to 0 to avoid an accidental CSS inheritance */
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.my-animation.ng-enter.ng-enter-active {
/* standard transition styles */
opacity:1;
}

Анимации со ступенчатой задержкой по умолчанию работают в ngRepeat (при условии, что CSS-класс определен). Вне ngRepeat для использования анимаций со ступенчатой задержкой можно вызвать несколько вызовов одного события в $animate. Однако ограничения заключаются в том, что у каждого элемента должно быть одинаковое значение CSS className, а также один и тот же родительский элемент. Операция ступенчатой задержки также будет сброшена, если после последней анимации пройдёт более 10 мс.

Следующий код вызовет событие ng-leave-stagger для предоставленного элемента:

var kids = parent.children();

$animate.leave(kids[0]); //stagger index=0
$animate.leave(kids[1]); //stagger index=1
$animate.leave(kids[2]); //stagger index=2
$animate.leave(kids[3]); //stagger index=3
$animate.leave(kids[4]); //stagger index=4

$timeout(function() {
  //stagger has reset itself
  $animate.leave(kids[5]); //stagger index=0
  $animate.leave(kids[6]); //stagger index=1
}, 100, false);

Анимации со ступенчатой задержкой в настоящее время поддерживаются только в CSS-определяемых анимациях.

JavaScript-определяемые анимации

//!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application.
var ngModule = angular.module('YourApp', ['ngAnimate']);
ngModule.animation('.my-crazy-animation', function() {
  return {
    enter: function(element, done) {
      //run the animation here and call done when the animation is complete
      return function(cancelled) {
        //this (optional) function will be called when the animation
        //completes or when the animation is cancelled (the cancelled
        //flag will be set to true if cancelled).
      };
    },
    leave: function(element, done) { },
    move: function(element, done) { },

    //animation that can be triggered before the class is added
    beforeAddClass: function(element, className, done) { },

    //animation that can be triggered after the class is added
    addClass: function(element, className, done) { },

    //animation that can be triggered before the class is removed
    beforeRemoveClass: function(element, className, done) { },

    //animation that can be triggered after the class is removed
    removeClass: function(element, className, done) { }
  };
});

JavaScript-определяемые анимации создаются с использованием селектора CSS-подобного класса и набора событий, которые устанавливают для выполнения функцию обратного вызова javascript. При запуске анимации $animate ищет соответствующую анимацию, которая соответствует значению атрибута CSS-класса элемента, а затем выполняет функцию обратного вызова соответствующего события анимации (если найдена). Другими словами, если CSS-классы, присутствующие в элементе, соответствуюте любой JavaScript анимации, то функция обратного вызова будет выполнена. Следует также отметить, что допускаются только простые селекторы одного класса (составные селекторы не поддерживаются).

В JavaScript анимации ожидается возврат объекта, содержащего различные функции обратного вызова событий анимации. Как упоминалось выше, эти функции обратного вызова вызываются на основе события анимации. Таким образом, если выполняется анимация входа, и JavaScript анимация найдена, то обработчик события входа будет управлять этой анимацией (в дополнение к коду CSS анимации ключевых кадров или перехода, определенному через таблицу стилей).

Установка

Сначала добавьте angular-animate.js в свой HTML:

    <script src="angular.js">
    <script src="angular-animate.js">

Вы можете загрузить этот файл из следующих мест:

• Google CDN
  например: //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js
• Bower
  например:

  bower install angular-animate@X.Y.Z

• code.angularjs.org
  например:

  "//code.angularjs.org/X.Y.Z/angular-animate.js"

где X.Y.Z – это версия AngularJS, которую вы используете.

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

  angular.module('app', ['ngAnimate']);

Теперь вы готовы начать работу!