Улучшить эту документацию Посмотреть исходный код $animateProvider
Обзор
Базовая реализация $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если она не установлена. -
node
-
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