classNameFilter([expression]); Sets and/or returns the CSS class regular expression that is checked when performing an animation. Upon bootstrap the classNameFilter value is not set at all and will therefore enable $animate to attempt to perform an animation on any element that is triggered. When setting the classNameFilter value, animations will only be performed on elements that successfully match the filter expression. This in turn can boost performance for low-powered devices as well as ap

$animate provider in module ng Default implementation of $animate that doesn't perform any animations, instead just synchronously performs DOM updates and resolves the returned runner promise. In order to enable animations the ngAnimate module has to be loaded. To see the functional implementation check out src/ngAnimate/animate.js. Methods register(name, factory); Registers a new injectable animation factory function. The factory function produces the animation object which contains

$animateCss

service in module ng This is the core version of $animateCss. By default, only when the ngAnimate is included, then the $animateCss service will actually perform animations. Click here to read the documentation for $animateCss.

$animate.setClass()

setClass(element, add, remove, [options]); Performs both the addition and removal of a CSS classes on an element and (during the process) triggers an animation surrounding the class addition/removal. Much like $animate.addClass and $animate.removeClass, setClass will only evaluate the classes being added/removed once a digest has passed. Note that class-based animations are treated differently compared to structural animations (like enter, move and leave) since the CSS classes may be added/rem

$animate.removeClass()

removeClass(element, className, [options]); Triggers a removeClass animation surrounding the removal of the provided CSS class(es). Upon execution, the removeClass operation will only be handled after the next digest and it will not trigger an animation if element does not contain the CSS class or if the class is added at a later step. Note that class-based animations are treated differently compared to structural animations (like enter, move and leave) since the CSS classes may be added/remov

$animate.pin()

pin(element, parentElement); Associates the provided element with a host parent element to allow the element to be animated even if it exists outside of the DOM structure of the Angular application. By doing so, any animation triggered via $animate can be issued on the element despite being outside the realm of the application or within another application. Say for example if the application was bootstrapped on an element that is somewhere inside of the <body> tag, but we wanted to allow

$animate.on()

on(event, container, callback); Sets up an event listener to fire whenever the animation event (enter, leave, move, etc...) has fired on the given element or among any of its children. Once the listener is fired, the provided callback is fired with the following params: $animate.on('enter', container, function callback(element, phase) { // cool we detected an enter animation within the container } ); Parameters Param Type Details event string the animation event that will be

$animate.off()

off(event, [container], [callback]); Deregisters an event listener based on the event which has been associated with the provided element. This method can be used in three different ways depending on the arguments: // remove all the animation event listeners listening for `enter` $animate.off('enter'); // 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 `cal

$animate.move()

move(element, parent, [after], [options]); Inserts (moves) the element into its new position in the DOM either after the after element (if provided) or as the first child within the parent element and then triggers an animation. A promise is returned that will be resolved during the next digest once the animation has completed. Parameters Param Type Details element DOMElement the element which will be moved into the new DOM position parent DOMElement the parent element which will a

$animate.leave()

leave(element, [options]); Triggers an animation and then removes the element from the DOM. When the function is called a promise is returned that will be resolved during the next digest once the animation has completed. Parameters Param Type Details element DOMElement the element which will be removed from the DOM options (optional) object an optional collection of options/styles that will be applied to the element Returns Promise the animation callback promise