Spec-Zone.ru › Angular.js 1.6

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

  1. $animate
  2. компонент модуля ng

Обзор

Базовая реализация $animate, которая не выполняет анимации, а вместо этого синхронно обновляет DOM и разрешает возвращаемую обещание исполнителя.

Для включения анимаций необходимо загрузить модуль ngAnimate.

Чтобы увидеть функциональную реализацию, обратитесь к src/ngAnimate/animate.js.

Методы

  • register(name, factory);

    Регистрирует новую фабрику анимации, которую можно ввести. Функция фабрики создает объект анимации, содержащий функции обратного вызова для каждого ожидаемого события анимации.

    • eventFn: function(element, ... , doneFunction, options) Элемент для анимации, doneFunction и параметры, переданные в анимацию. В зависимости от типа анимации в функцию анимации будут внедрены дополнительные аргументы. Ниже приводится описание сигнатур функций для различных методов анимации:

    • setClass: function(element, addedClasses, removedClasses, doneFunction, options)

    • addClass: function(element, addedClasses, doneFunction, options)
    • removeClass: function(element, removedClasses, doneFunction, options)
    • enter, leave, move: function(element, doneFunction, options)
    • animate: function(element, fromStyles, toStyles, doneFunction, options)

      Убедитесь, что вызываете doneFunction после завершения анимации.

    return {
      //enter, leave, move signature
      eventFn : function(element, done, options) {
        //code to run the animation
        //once complete, then run done()
        return function endFunction(wasCancelled) {
          //code to cancel the animation
        }
      }
    }
    

    Параметры

    Параметр Тип Описание
    name string

    Имя анимации (это то, что будет сравниваться со значением CSS на основе класса).

    factory Function

    Функция фабрики, которая будет выполнена для возврата объекта анимации.

  • customFilter([filterFn]);

    Устанавливает и/или возвращает пользовательскую функцию фильтра, которая используется для «фильтрации» анимаций, т.е. определения того, разрешена ли анимация. При отсутствии фильтра (по умолчанию) анимация не будет заблокирована. Установка значения customFilter позволит выполнять анимации только в тех случаях, когда возвращаемое значение функции фильтра имеет истинное значение.

    Это позволяет легко создавать произвольно сложные правила для фильтрации анимаций, такие как разрешение только определенных событий или включение анимаций на определенных поддеревьях DOM и т.д. Фильтрация анимаций также может повысить производительность для устройств с низкой мощностью, а также приложений с большим количеством структурных операций.

    Лучшая практика: Сохраняйте функцию фильтрации как можно более компактной, так как она будет вызываться для каждого действия DOM (например, вставки, удаления, изменения класса), выполняемого «осознающими анимацию» директивами. Список встроенных директивы, поддерживающих анимации, см. здесь. Выполнение вычислений с большой вычислительной сложностью или операций, требующих много времени, при каждом вызове функции фильтрации может привести к снижению скорости анимации.

    Примечание: Если указан, customFilter будет проверен до classNameFilter.

    Параметры

    Параметр Тип Описание
    filterFn
    (необязательно)
    Function=

    Функция фильтра, которая будет использоваться для фильтрации всех анимаций. Если возвращается ложное значение, анимация не выполняется. Функция вызывается с указанными аргументами:

    • node {DOMElement} - Элемент DOM, который будет анимирован.
    • event {String} - Название события анимации (например, enter, leave, addClass и т. д.).
    • options {Object} - Коллекция параметров/стилей, используемых для анимации.

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

    Function

    Текущая функция фильтра или null если она не установлена.

  • classNameFilter([expression]);

    Устанавливает и/или возвращает регулярное выражение CSS-класса, проверяемое при выполнении анимации. При загрузке classNameFilter не задается, что позволяет $animate пытаться выполнить анимацию для любого триггера. При установке classNameFilter анимации будут выполняться только для элементов, которые успешно соответствуют выражению фильтра. Это может повысить производительность для устройств с низкой мощностью и приложений с большим количеством структурных операций.

    Примечание: Если указан, classNameFilter будет проверяться после customFilter. Если customFilter присутствует и возвращает false, classNameFilter не проверяется.

    Параметры

    Параметр Тип Описание
    expression
    (необязательно)
    RegExp

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

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

    RegExp

    Текущее значение выражения CSS-класса. Если null, то значение выражения не задано.

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.6.9/docs/api/ng/provider/$animateProvider

Spec-Zone.ru

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