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

Методы

• on(event, container, callback);

  Настраивает обработчик событий, который срабатывает всякий раз, когда событие анимации (вход, выход, перемещение и т. д.) срабатывает на заданном элементе или среди его дочерних элементов. После срабатывания обработчика, предоставленная функция обратного вызова вызывается со следующими параметрами:

  $animate.on('enter', container,
     function callback(element, phase) {
       // cool we detected an enter animation within the container
     }
  );
  

  Параметры

  Параметр	Тип	Подробности
  event	string	событие анимации, которое будет захвачено (например, вход, выход, перемещение, добавление класса, удаление класса и т. д.)
  container	DOMElement	элемент контейнера, который будет захватывать каждое из событий анимации, которые срабатывают на нем самом, а также среди его дочерних элементов
  callback	Function	функция обратного вызова, которая будет вызвана при срабатывании обработчика Аргументы, присутствующие в функции обратного вызова: element - Захваченный элемент DOM, на котором было запущено анимационное событие. phase - Фаза анимации. Возможные фазы: start (начало анимации) и close (конец анимации).

• off(event, [container], [callback]);

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

  // remove all the animation event listeners listening for `enter`
  $animate.off('enter');
  
  // remove all the animation event listeners listening for `enter` on the given element and its children
  $animate.off('enter', container);
  
  // remove the event listener function provided by `listenerFn` that is set
  // to listen for `enter` on the given `element` as well as its children
  $animate.off('enter', container, callback);
  

  Параметры

  Параметр	Тип	Подробности
  event	string	событие анимации (например, вход, выход, перемещение, добавление класса, удаление класса и т. д.)
  container (необязательно)	DOMElement	элемент-контейнер, на котором был размещен обработчик событий
  callback (необязательно)	Function=	функция обратного вызова, зарегистрированная как обработчик

• pin(element, parentElement);

  Связывает предоставленный элемент с родительским элементом-хостом, чтобы позволить элементу анимироваться даже если он существует вне структуры DOM приложения Angular. Тем самым, любая анимация, инициированная через $animate, может быть выполнена на элементе, несмотря на то, что он находится за пределами области приложения или внутри другого приложения. Например, если приложение было запущено на элементе, который где-то внутри тега <body>, но мы хотели позволить элементу быть непосредственным дочерним элементом document.body, это можно сделать, прикрепив элемент через $animate.pin(element). Имейте в виду, что вызов $animate.pin(element, parentElement) фактически не вставит элемент в DOM; он просто создаст ассоциацию.

  Обратите внимание, что эта функция активна только при использовании модуля ngAnimate

  Параметры

  Параметр	Тип	Подробности
  element	DOMElement	внешний элемент, который будет прикреплен
  parentElement	DOMElement	родительский элемент-хост, который будет связан с внешним элементом

• enabled([element], [enabled]);

  Используется для получения и установки того, включены или выключены анимации во всем приложении или на элементе и его дочерних элементах. Эту функцию можно вызывать четырьмя способами:

  // returns true or false
  $animate.enabled();
  
  // changes the enabled state for all animations
  $animate.enabled(false);
  $animate.enabled(true);
  
  // returns true or false if animations are enabled for an element
  $animate.enabled(element);
  
  // changes the enabled state for an element and its children
  $animate.enabled(element, true);
  $animate.enabled(element, false);
  

  Параметры

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

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

  boolean

  включены или выключены анимации

• cancel(animationPromise);

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

  Параметры

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

• enter(element, parent, [after], [options]);

  Вставляет элемент в DOM после элемента after (если указан) или в качестве первого дочернего элемента элемента parent и затем запускает анимацию. Возвращается обещание, которое будет выполнено во время следующего цикла обработки, после завершения анимации.

  Параметры

  Параметр	Тип	Подробности
  element	DOMElement	элемент, который будет вставлен в DOM
  parent	DOMElement	родительский элемент, который добавит элемент в качестве дочернего (если элемент after не указан)
  after (необязательно)	DOMElement	элемент-побратим, после которого будет добавлен элемент
  options (необязательно)	object	необязательная коллекция параметров/стилей, которые будут применены к элементу

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

  Promise

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

• move(element, parent, [after], [options]);

  Вставляет (перемещает) элемент в новое положение в DOM либо после элемента after (если указан), либо как первый дочерний элемент элемента parent и затем запускает анимацию. Возвращается обещание, которое будет выполнено во время следующего цикла обработки, после завершения анимации.

  Параметры

  Параметр	Тип	Подробности
  element	DOMElement	элемент, который будет перемещен в новое положение в DOM
  parent	DOMElement	родительский элемент, который добавит элемент в качестве дочернего (если элемент after не указан)
  after (необязательно)	DOMElement	элемент-побратим, после которого будет добавлен элемент
  options (необязательно)	object	необязательная коллекция параметров/стилей, которые будут применены к элементу

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

  Promise

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

• leave(element, [options]);

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

  Параметры

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

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

  Promise

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

• addClass(element, className, [options]);

  Запускает анимацию добавления предоставленного(ых) класса(ов) CSS. После выполнения операция добавления класса будет обработана только после следующего цикла обработки, и она не запустит анимацию, если элемент уже содержит класс CSS или если класс будет удален на более позднем шаге. Обратите внимание, что анимации на основе классов обрабатываются по-другому по сравнению со структурными анимациями (такими как вход, перемещение и выход), так как CSS-классы могут добавляться/удаляться в разных точках в зависимости от того, используются ли анимации CSS или JavaScript.

  Параметры

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

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

  Promise

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

• removeClass(element, className, [options]);

  Вызывает анимацию removeClass, окружающую удаление предоставленного(ых) CSS класса(ов). После выполнения операция removeClass будет обработана только после следующего переваривания, и она не вызовет анимацию, если элемент не содержит CSS класс или если класс добавлен на более позднем этапе. Обратите внимание, что анимации, основанные на классах, обрабатываются по-другому по сравнению со структурными анимациями (например, enter, move и leave), так как CSS классы могут быть добавлены/удалены в разные моменты в зависимости от того, используются ли CSS или JavaScript анимации.

  Параметры

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

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

  Promise

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

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

  Выполняет добавление и удаление CSS классов на элементе и (в процессе) вызывает анимацию, окружающую добавление/удаление класса. Подобно $animate.addClass и $animate.removeClass, setClass будет оценивать добавляемые/удаляемые классы только после того, как пройдет переваривание. Обратите внимание, что анимации, основанные на классах, обрабатываются по-другому по сравнению со структурными анимациями (например, enter, move и leave), так как CSS классы могут быть добавлены/удалены в разные моменты в зависимости от того, используются ли CSS или JavaScript анимации.

  Параметры

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

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

  Promise

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

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

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

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

  Параметры

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

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

  Promise

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