Spec-Zone.ru › Angular.js 1.8

Улучшить эту документацию Просмотреть исходный код $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
   }
);
    Примечание: Обычно события, которые срабатывают, соответствуют методам $animate в 1:1, например, addClass() будет срабатывать addClass, а ngClass будет срабатывать addClass при добавлении классов и removeClass при удалении классов. Однако есть два исключения:
    • если во время одной анимации выполняются как действие addClass(), так и действие removeClass(), срабатывающее событие будет setClass. Это верно даже для ngClass.
    • вызов animate(), который добавляет и удаляет классы, будет срабатывать событием setClass, но если он удаляет или добавляет классы, он будет срабатывать событием animate вместо этого.

    Параметры

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

    событие анимации, которое будет захвачено (например, вход, выход, перемещение, addClass, removeClass и т.д.)
    container DOMElement

    элемент-контейнер, который будет захватывать каждое из событий анимации, которые срабатывают на нем самом, а также среди его дочерних элементов
    callback Function

    функция обратного вызова, которая будет вызвана при срабатывании обработчика.

    Аргументы, присутствующие в функции обратного вызова:

    • element - Захваченный DOM-элемент, на котором была запущена анимация.
    • phase - Фаза анимации. Возможные фазы: начало (когда анимация начинается) и завершение (когда она заканчивается).
    • data - объект со следующими свойствами:
      • addClass - {string|null} - разделенные пробелами CSS-классы для добавления к элементу
      • removeClass - {string|null} - разделенные пробелами CSS-классы для удаления из элемента
      • from - {Object|null} - CSS-свойства и значения в начале анимации
      • to - {Object|null} - CSS-свойства и значения в конце анимации

    Обратите внимание, что обратный вызов не вызывает переваривание области видимости. Чтобы распространить изменения в области видимости, заключите свой вызов в scope.$apply.

  • 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

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

    Отменяет предоставленную анимацию и применяет конечное состояние анимации. Обратите внимание, что это не отменяет базовую операцию, например, установку классов или добавление элемента в DOM.

    Параметры

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

    Бегунок анимации, возвращаемый функцией $animate.

    Пример

  • 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

    Возвращает

    Runner

    бегунок анимации

  • 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

    Возвращает

    Runner

    бегунок анимации

  • leave(element, [options]);

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

    Параметры

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

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

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

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

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

    Runner

    исполнитель анимации

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

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

    Параметры

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

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

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

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

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

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

    Runner

    исполнитель анимации

  • 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
    • to - {Object} - CSS-свойства и значения в конце анимации. Должны соответствовать from

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

    Runner

    исполнитель анимации

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

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

    Runner

    исполнитель анимации

  • 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

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

    Runner

    исполнитель анимации

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

Spec-Zone.ru

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