Spec-Zone.ru › Angular.js 1.8

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

  1. $animate
  2. провайдер в модуле ng

Обзор

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

Для включения анимаций необходимо загрузить модуль 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–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/provider/$animateProvider

Spec-Zone.ru

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