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