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

register(name, factory); Registers a new injectable animation factory function. The factory function produces the animation object which contains callback functions for each event that is expected to be animated. eventFn: function(element, ... , doneFunction, options) The element to animate, the doneFunction and the options fed into the animation. Depending on the type of animation additional arguments will be injected into the animation function. The list below explains the function signatur

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

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

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

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

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

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.

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

enabled([element], [enabled]); Used to get and set whether animations are enabled or not on the entire application or on an element and its children. This function can be called in four ways: // returns true or false $animate.enabled(); // changes the enabled state for all animations $animate.enabled(false); $animate.enabled(true); // returns true or false if animations are enabled for an element $animate.enabled(element); // changes the enabled state for an element and its children $animat