Spec-Zone.ru › Angular.js 1.5

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

  1. $animateProvider
  2. Сервис в модуле ng

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

По умолчанию $animate не запускает анимации. Это связано с тем, что модуль ngAnimate не включен, и только при его включении будут функциональны анимационные хуки, которые $animate запускает. После активации все структурные ng- директивы будут запускать анимацию при выполнении операций с DOM (вставка, удаление и перемещение). Другие директивы, такие как ngClass, ngShow, ngHide и ngMessages, также поддерживают анимации.

Рекомендуется всегда использовать сервис $animate, когда выполняются операции с DOM внутри директив.

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

Методы

  • 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 listeners for all animation events from the container element
$animate.off(container);

// 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 `callback` that is set
// to listen for `enter` on the given `container` as well as its children
$animate.off('enter', container, callback);

    Параметры

    Параметр Тип Подробности
    event | container stringDOMElement

    событие анимации (например, вход, выход, перемещение, добавление класса, удаление класса и т. д.) или элемент контейнера. Если это элемент, все остальные аргументы игнорируются.
    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

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

    • addClass - {string} - разделенные пробелом CSS-классы, которые нужно добавить к элементу
    • from - {Object} - CSS-свойства и значения в начале анимации. Должны соответствовать to
    • removeClass - {string} - разделенные пробелом CSS-классы, которые нужно удалить из элемента
    • to - {Object} - CSS-свойства и значения в конце анимации. Должны соответствовать from

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

    Promise

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

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

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

    Параметры

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

    элемент, который будет перемещён в новое положение в DOM
    parent DOMElement

    родительский элемент, который добавит элемент как дочерний (если элемент after не указан)
    after
    (необязательно)
    		 DOMElement

    элемент-побратим, после которого будет добавлен элемент
    options
    (необязательно)
    		 object

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

    • addClass - {string} - разделенные пробелом CSS-классы, которые нужно добавить к элементу
    • from - {Object} - CSS-свойства и значения в начале анимации. Должны соответствовать to
    • removeClass - {string} - разделенные пробелом CSS-классы, которые нужно удалить из элемента
    • to - {Object} - CSS-свойства и значения в конце анимации. Должны соответствовать from

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

    Promise

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

  • leave(element, [options]);

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

    Параметры

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

    элемент, который будет удалён из DOM
    options
    (необязательно)
    		 object

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

    • addClass - {string} - разделенные пробелом CSS-классы, которые нужно добавить к элементу
    • from - {Object} - CSS-свойства и значения в начале анимации. Должны соответствовать to
    • removeClass - {string} - разделенные пробелом CSS-классы, которые нужно удалить из элемента
    • to - {Object} - CSS-свойства и значения в конце анимации. Должны соответствовать from

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

    Promise

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

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

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

    Параметры

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

    элемент, к которому будут применены классы CSS
    className string

    класс(ы) CSS, которые будут добавлены (несколько классов разделяются пробелами)
    options
    (необязательно)
    		 object

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

    • addClass - {string} - классы CSS, разделяемые пробелами, которые нужно добавить к элементу
    • from - {Object} - свойства и значения CSS в начале анимации. Должны соответствовать to
    • removeClass - {string} - классы CSS, разделяемые пробелами, которые нужно удалить из элемента
    • to - {Object} - свойства и значения CSS в конце анимации. Должны соответствовать from

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

    Promise

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

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

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

    Параметры

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

    элемент, к которому будут применены классы CSS
    className string

    класс(ы) CSS, которые будут удалены (несколько классов разделяются пробелами)
    options
    (необязательно)
    		 object

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

    • addClass - {string} - классы CSS, разделяемые пробелами, которые нужно добавить к элементу
    • from - {Object} - свойства и значения CSS в начале анимации. Должны соответствовать to
    • removeClass - {string} - классы CSS, разделяемые пробелами, которые нужно удалить из элемента
    • to - {Object} - свойства и значения CSS в конце анимации. Должны соответствовать from

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

    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

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

    • addClass - {string} - классы CSS, разделяемые пробелами, которые нужно добавить к элементу
    • from - {Object} - свойства и значения CSS в начале анимации. Должны соответствовать to
    • removeClass - {string} - классы CSS, разделяемые пробелами, которые нужно удалить из элемента
    • to - {Object} - свойства и значения CSS в конце анимации. Должны соответствовать from

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

    Promise

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

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

    Выполняет встроенную анимацию элемента, которая применяет предоставленные стили CSS to и from к элементу. Если обнаруженный 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

    стили CSS from (начальные), которые будут применены к элементу и на протяжении анимации.
    to object

    стили CSS to (конечные), которые будут применены к элементу и на протяжении анимации.
    className
    (необязательно)
    		 string

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

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

    • addClass - {string} - классы CSS, разделяемые пробелами, которые нужно добавить к элементу
    • from - {Object} - свойства и значения CSS в начале анимации. Должны соответствовать to
    • removeClass - {string} - классы CSS, разделяемые пробелами, которые нужно удалить из элемента
    • to - {Object} - свойства и значения CSS в конце анимации. Должны соответствовать from

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

    Promise

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

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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API