Spec-Zone.ru › Angular.js 1.6

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

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

Обзор

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

По умолчанию $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 приложения AngularJS. Таким образом, любая анимация, инициированная через $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
    (необязательно)
    		 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
    (необязательно)
    		 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 класс или если класс удаляется на более позднем этапе. Обратите внимание, что анимации на основе классов обрабатываются по-другому по сравнению со структурными анимациями (такими как вход, перемещение и выход), поскольку 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 класс или если класс добавляется на более позднем этапе. Обратите внимание, что анимации на основе классов обрабатываются по-другому по сравнению со структурными анимациями (такими как вход, перемещение и выход), поскольку 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 будет оценивать добавляемые/удаляемые классы только после того, как пройдет переваривание. Обратите внимание, что анимации на основе классов обрабатываются по-другому по сравнению со структурными анимациями (такими как вход, перемещение и выход), поскольку 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–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.6.9/docs/api/ng/service/$animate

Spec-Zone.ru

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