Улучшить документацию Просмотреть исходный код $animate

$animateProvider
Сервис в модуле ngAnimate

Сервис $animate предоставляет поддержку обнаружения анимаций при выполнении операций с DOM (вставка, удаление и перемещение), а также при добавлении и удалении классов. При выполнении любой из этих операций сервис $animate проверяет любые определенные на JavaScript анимации (которые определяются с помощью объекта поставщика $animateProvider), а также любые CSS-анимации по отношению к классам CSS, присутствующим на элементе после выполнения операции с DOM.

Сервис $animate используется в фоновом режиме с существующими директивами, и анимации с этими директивами будут работать без дополнительной настройки.

Требуется модуль ngAnimate.

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

Обещания обратного вызова

В AngularJS 1.3 каждый из методов анимации в сервисе $animate возвращает обещание при вызове. Само обещание выполняется, когда анимация завершается, отменяется или пропускается из-за отключения анимаций. (Обратите внимание, что даже если анимация отменяется, она все равно вызовет функцию разрешения анимации.)

$animate.enter(element, container).then(function() {
  //...this is called once the animation is complete...
});

Также обратите внимание, что из-за природы обещания обратного вызова, если любой код, специфичный для Angular (например, изменение области видимости, местоположения страницы и т. д.), выполняется внутри обещания обратного вызова, убедитесь, что вы обернули код с использованием $scope.$apply(...);

$animate.leave(element).then(function() {
  $scope.$apply(function() {
    $location.path('/new-page');
  });
});

Анимацию также можно отменить, вызвав метод $animate.cancel(promise) с предоставленным обещанием, которое было возвращено при запуске анимации.

var promise = $animate.addClass(element, 'super-long-animation');
promise.then(function() {
  //this will still be called even if cancelled
});

element.on('click', function() {
  //tooo lazy to wait for the animation to end
  $animate.cancel(promise);
});

(Обратите внимание, что отмена обещания уникальна для $animate, так как обещания в целом не могут быть отменены.)

Методы

animate(element, from, to, [className], [options]);

Выполняет анимацию элемента, применяя предоставленные to и from стили CSS к элементу. Если обнаружен любой соответствующий предоставленному className значению CSS-переход, ключевая кадр или JavaScript, то анимация примет предоставленные стили. Например, если для данного className задана анимация перехода, то предоставленные from и to стили будут применены вместе с заданным переходом. Если обнаружена анимация JavaScript, то предоставленные стили будут переданы в качестве параметров функции.

ngModule.animation('.my-inline-animation', function() {
  return {
    animate : function(element, className, from, to, done) {
      //styles
    }
  }
});

Ниже представлено пошаговое описание процесса animate анимации:

Шаг анимации	Вид атрибута класса элемента
1. Вызывается `$animate.animate(...)`	`class="my-animation"`
2. `$animate` ожидает следующего цикла обработки, чтобы начать анимацию	`class="my-animation ng-animate"`
3. `$animate` выполняет обнаруженные на элементе анимации, заданные JavaScript	`class="my-animation ng-animate"`
4. К элементу добавляется класс `className`	`class="my-animation ng-animate className"`
5. `$animate` сканирует стили элемента, чтобы получить длительность и задержку CSS-перехода/анимации	`class="my-animation ng-animate className"`
6. `$animate` блокирует все CSS-переходы на элементе, чтобы гарантировать, что стили класса `.className` будут применены сразу	`class="my-animation ng-animate className"`
7. `$animate` применяет предоставленный набор `from` стилей CSS к элементу	`class="my-animation ng-animate className"`
8. `$animate` ожидает одной кадра анимации (это выполняет пересчёт)	`class="my-animation ng-animate className"`
9. `$animate` удаляет блок CSS-перехода, установленный на элементе	`class="my-animation ng-animate className"`
10. К элементу добавляется класс `className-active` (это запускает CSS-переход/анимацию)	`class="my-animation ng-animate className className-active"`
11. `$animate` применяет набор `to` стилей CSS к элементу, которые затем обрабатываются переходом	`class="my-animation ng-animate className className-active"`
12. `$animate` ожидает завершения анимации (через события и таймаут)	`class="my-animation ng-animate className className-active"`
13. Анимация завершается, и все сгенерированные классы CSS удаляются из элемента	`class="my-animation"`
14. Возвращённое обещание разрешается.	`class="my-animation"`

Параметры

Параметр	Тип	Подробности
element	`DOMElement`	элемент, который будет фокусом анимации входа
from	`object`	набор стилей CSS, которые будут применены к элементу в начале анимации
to	`object`	набор стилей CSS, к которым будет анимироваться элемент
className (необязательно)	`string`	необязательный класс CSS, который будет добавлен к элементу на время анимации (по умолчанию класс `ng-inline-animate`)
options (необязательно)	`object`	необязательный набор параметров, которые будут взяты CSS-переходом/анимацией

Возвращаемое значение

Promise

обещание обратного вызова анимации

enter(element, parentElement, afterElement, [options]);

Добавляет элемент к элементу parentElement, находящемуся в документе, а затем выполняет анимацию входа. После запуска анимации следующие классы CSS будут присутствовать на элементе на время анимации:

Ниже представлено пошаговое описание процесса анимации входа:

Шаг анимации	Вид атрибута класса элемента
1. Вызывается `$animate.enter(...)`	`class="my-animation"`
2. Элемент вставляется в элемент `parentElement` или рядом с элементом `afterElement`	`class="my-animation"`
3. `$animate` ожидает следующего цикла обработки, чтобы начать анимацию	`class="my-animation ng-animate"`
4. `$animate` выполняет обнаруженные на элементе анимации, заданные JavaScript	`class="my-animation ng-animate"`
5. К элементу добавляется класс `.ng-enter`	`class="my-animation ng-animate ng-enter"`
6. `$animate` сканирует стили элемента, чтобы получить длительность и задержку CSS-перехода/анимации	`class="my-animation ng-animate ng-enter"`
7. `$animate` блокирует все CSS-переходы на элементе, чтобы гарантировать, что стили класса `.ng-enter` будут применены сразу	`class="my-animation ng-animate ng-enter"`
8. `$animate` ожидает одной кадра анимации (это выполняет пересчёт)	`class="my-animation ng-animate ng-enter"`
9. `$animate` удаляет блок CSS-перехода, установленный на элементе	`class="my-animation ng-animate ng-enter"`
10. К элементу добавляется класс `.ng-enter-active` (это запускает CSS-переход/анимацию)	`class="my-animation ng-animate ng-enter ng-enter-active"`
11. `$animate` ожидает завершения анимации (через события и таймаут)	`class="my-animation ng-animate ng-enter ng-enter-active"`
12. Анимация завершается, и все сгенерированные классы CSS удаляются из элемента	`class="my-animation"`
13. Возвращённое обещание разрешается.	`class="my-animation"`

Параметры

Параметр	Тип	Подробности
element	`DOMElement`	элемент, который будет фокусом анимации входа
parentElement	`DOMElement`	родительский элемент элемента, который будет фокусом анимации входа
afterElement	`DOMElement`	элемент-последователь (предыдущий элемент) элемента, который будет фокусом анимации входа
options (необязательно)	`object`	необязательный набор параметров, которые будут взяты CSS-переходом/анимацией

Возвращаемое значение

Promise

обещание обратного вызова анимации

leave(element, [options]);

Выполняет операцию анимации выхода и, после завершения, удаляет элемент из DOM. После запуска анимации следующие классы CSS будут добавлены на время анимации:

Ниже представлено пошаговое описание процесса анимации выхода:

Шаг анимации	Вид атрибута класса элемента
1. Вызывается `$animate.leave(...)`	`class="my-animation"`
2. `$animate` выполняет обнаруженные на элементе анимации, заданные JavaScript	`class="my-animation ng-animate"`
3. `$animate` ожидает следующего цикла обработки, чтобы начать анимацию	`class="my-animation ng-animate"`
4. К элементу добавляется класс `.ng-leave`	`class="my-animation ng-animate ng-leave"`
5. `$animate` сканирует стили элемента, чтобы получить длительность и задержку CSS-перехода/анимации	`class="my-animation ng-animate ng-leave"`
6. `$animate` блокирует все CSS-переходы на элементе, чтобы гарантировать, что стили класса `.ng-leave` будут применены сразу	`class="my-animation ng-animate ng-leave"`
7. `$animate` ожидает одной кадра анимации (это выполняет пересчёт)	`class="my-animation ng-animate ng-leave"`
8. `$animate` удаляет блок CSS-перехода, установленный на элементе	`class="my-animation ng-animate ng-leave"`
9. К элементу добавляется класс `.ng-leave-active` (это запускает CSS-переход/анимацию)	`class="my-animation ng-animate ng-leave ng-leave-active"`
10. `$animate` ожидает завершения анимации (через события и таймаут)	`class="my-animation ng-animate ng-leave ng-leave-active"`
11. Анимация завершается, и все сгенерированные классы CSS удаляются из элемента	`class="my-animation"`
12. Элемент удаляется из DOM	...
13. Возвращённое обещание разрешается.	...

Параметры

Параметр	Тип	Подробности
element	`DOMElement`	элемент, который будет фокусом анимации выхода
options (необязательно)	`object`	необязательный набор стилей, которые будут взяты CSS-переходом/анимацией

Возвращаемое значение

Promise

обещание обратного вызова анимации

move(element, parentElement, afterElement, [options]);

Вызывает операцию перемещения DOM-элемента. Непосредственно перед началом анимации служба анимации либо добавит его в контейнер parentElement, либо поместит элемент непосредственно после элемента afterElement, если он присутствует. Затем будет выполнена анимация перемещения. После запуска анимации следующие CSS-классы будут добавлены на период анимации:

Ниже приведён подробный разбор каждого шага, происходящего во время анимации перемещения:

Шаг анимации	Вид атрибута класса элемента
1. `$animate.move(...)` вызывается	`class="my-animation"`
2. Элемент перемещается в элемент parentElement или рядом с элементом afterElement	`class="my-animation"`
3. `$animate` ожидает следующего цикла обработки для запуска анимации	`class="my-animation ng-animate"`
4. `$animate` выполняет определённые JavaScript-анимации, обнаруженные в элементе	`class="my-animation ng-animate"`
5. К элементу добавляется класс `.ng-move`	`class="my-animation ng-animate ng-move"`
6. `$animate` сканирует стили элемента, чтобы получить длительность и задержку CSS-переходов/анимации	`class="my-animation ng-animate ng-move"`
7. `$animate` блокирует все CSS-переходы элемента, чтобы гарантировать, что стили класса `.ng-move` применяются сразу	`class="my-animation ng-animate ng-move"`
8. `$animate` ожидает одного кадра анимации (это выполняет пересчёт)	`class="my-animation ng-animate ng-move"`
9. `$animate` удаляет блокировку CSS-переходов, установленную на элементе	`class="my-animation ng-animate ng-move"`
10. Добавляется класс `.ng-move-active` (это запускает CSS-переход/анимацию)	`class="my-animation ng-animate ng-move ng-move-active"`
11. `$animate` ожидает завершения анимации (через события и таймаут)	`class="my-animation ng-animate ng-move ng-move-active"`
12. Анимация завершается, и все сгенерированные CSS-классы удаляются из элемента	`class="my-animation"`
13. Возвращаемое обещание разрешается.	`class="my-animation"`

Параметры

Параметр	Тип	Подробности
element	`DOMElement`	элемент, который будет центром анимации перемещения
parentElement	`DOMElement`	родительский элемент элемента, который будет центром анимации перемещения
afterElement	`DOMElement`	элемент-предок (предыдущий элемент) элемента, который будет центром анимации перемещения
options (необязательно)	`object`	необязательный набор стилей, которые будут использованы CSS-переходом/анимацией

Возвращаемое значение

Promise

обещание обратного вызова анимации

addClass(element, className, [options]);

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

Ниже приведён подробный разбор каждого шага, происходящего во время анимации addClass:

Шаг анимации	Вид атрибута класса элемента
1. `$animate.addClass(element, 'super')` вызывается	`class="my-animation"`
2. `$animate` выполняет определённые JavaScript-анимации, обнаруженные в элементе	`class="my-animation ng-animate"`
3. К элементу добавляется класс `.super-add`	`class="my-animation ng-animate super-add"`
4. `$animate` ожидает одного кадра анимации (это выполняет пересчёт)	`class="my-animation ng-animate super-add"`
5. Добавляются классы `.super` и `.super-add-active` (это запускает CSS-переход/анимацию)	`class="my-animation ng-animate super super-add super-add-active"`
6. `$animate` сканирует стили элемента, чтобы получить длительность и задержку CSS-переходов/анимации	`class="my-animation ng-animate super super-add super-add-active"`
7. `$animate` ожидает завершения анимации (через события и таймаут)	`class="my-animation ng-animate super super-add super-add-active"`
8. Анимация завершается, и все сгенерированные CSS-классы удаляются из элемента	`class="my-animation super"`
9. Родительский класс сохраняется на элементе	`class="my-animation super"`
10. Возвращаемое обещание разрешается.	`class="my-animation super"`

Параметры

Параметр	Тип	Подробности
element	`DOMElement`	элемент, который будет анимирован
className	`string`	CSS-класс, который будет добавлен к элементу и затем анимирован
options (необязательно)	`object`	необязательный набор стилей, которые будут использованы CSS-переходом/анимацией

Возвращаемое значение

Promise

обещание обратного вызова анимации

removeClass(element, className, [options]);

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

Ниже приведён подробный разбор каждого шага, происходящего во время анимации removeClass:

Шаг анимации	Вид атрибута класса элемента
1. `$animate.removeClass(element, 'super')` вызывается	`class="my-animation super"`
2. `$animate` выполняет определённые JavaScript-анимации, обнаруженные в элементе	`class="my-animation super ng-animate"`
3. К элементу добавляется класс `.super-remove`	`class="my-animation super ng-animate super-remove"`
4. `$animate` ожидает одного кадра анимации (это выполняет пересчёт)	`class="my-animation super ng-animate super-remove"`
5. Добавляются классы `.super-remove-active` и `.super` удаляется (это запускает CSS-переход/анимацию)	`class="my-animation ng-animate super-remove super-remove-active"`
6. `$animate` сканирует стили элемента, чтобы получить длительность и задержку CSS-переходов/анимации	`class="my-animation ng-animate super-remove super-remove-active"`
7. `$animate` ожидает завершения анимации (через события и таймаут)	`class="my-animation ng-animate super-remove super-remove-active"`
8. Анимация завершается, и все сгенерированные CSS-классы удаляются из элемента	`class="my-animation"`
9. Возвращаемое обещание разрешается.	`class="my-animation"`

Параметры

Параметр	Тип	Подробности
element	`DOMElement`	элемент, который будет анимирован
className	`string`	CSS-класс, который будет анимирован и затем удалён из элемента
options (необязательно)	`object`	необязательный набор стилей, которые будут использованы CSS-переходом/анимацией

Возвращаемое значение

Promise

обещание обратного вызова анимации

setClass(element, add, remove, [options]);

Добавляет и/или удаляет заданные CSS-классы элементу. После завершения вызывается обратный вызов done() (если указан).

Шаг анимации	Вид атрибута класса элемента
1. Вызывается `$animate.setClass(element, 'on', 'off')`	`class="my-animation off"`
2. `$animate` выполняет JavaScript-анимации, определенные на элементе	`class="my-animation ng-animate off"`
3. К элементу добавляются классы `.on-add` и `.off-remove`	`class="my-animation ng-animate on-add off-remove off"`
4. `$animate` ожидает одной кадра анимации (это производит пересчёт)	`class="my-animation ng-animate on-add off-remove off"`
5. К элементу добавляются классы `.on`, `.on-add-active` и `.off-remove-active`, и удаляется `.off` (это запускает CSS-переход/анимацию)	`class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active"`
6. `$animate` сканирует стили элемента, чтобы получить длительность и задержку CSS-перехода/анимации	`class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active"`
7. `$animate` ожидает завершения анимации (через события и таймаут)	`class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active"`
8. Анимация завершается, и все сгенерированные CSS-классы удаляются из элемента	`class="my-animation on"`
9. Возвращаемое обещание разрешается.	`class="my-animation on"`

Параметры

Параметр	Тип	Подробности
element	`DOMElement`	элемент, которому будут изменены и удалены CSS-классы
add	`string`	CSS-классы, которые будут добавлены к элементу
remove	`string`	CSS-класс, который будет удален из CSS-классов элемента, которые были установлены на элементе
options (необязательно)	`object`	необязательная коллекция стилей, которые будут использованы CSS-переходом/анимацией

Возвращаемое значение

Promise

обещание обратного вызова анимации

cancel(animationPromise);

Отменяет предоставленную анимацию.

Параметры

Параметр Тип Подробности

animationPromise Promise
Обещание анимации, возвращаемое при запуске анимации.

Параметр	Тип	Подробности
animationPromise	`Promise`	Обещание анимации, возвращаемое при запуске анимации.

enabled([value], [element]);

Глобально включает/отключает анимации.

Параметры

Параметр	Тип	Подробности
value (необязательно)	`boolean`	Если указано, то включает или выключает анимацию.
element (необязательно)	`DOMElement`	Если указано, то элемент будет использован для представления операции включения/отключения

Возвращаемое значение

boolean

Текущее состояние анимации.

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.3.20/docs/api/ngAnimate/service/$animate

Улучшить документацию Просмотреть исходный код $animate

Обещания обратного вызова

Методы

animate(element, from, to, [className], [options]);

Параметры

Возвращаемое значение

enter(element, parentElement, afterElement, [options]);

Параметры

Возвращаемое значение

leave(element, [options]);

Параметры

Возвращаемое значение

move(element, parentElement, afterElement, [options]);

Параметры

Возвращаемое значение

addClass(element, className, [options]);

Параметры

Возвращаемое значение

removeClass(element, className, [options]);

Параметры

Возвращаемое значение

setClass(element, add, remove, [options]);

Параметры

Возвращаемое значение

cancel(animationPromise);

Параметры

enabled([value], [element]);

Параметры

Возвращаемое значение