ngAnimate.$animate

Usage

$animate();

Methods

• enter(element, parentElement, afterElement, [doneCallback]);

  Appends the element to the parentElement element that resides in the document and then runs the enter animation. Once the animation is started, the following CSS classes will be present on the element for the duration of the animation:

  Below is a breakdown of each step that occurs during enter animation:

  Animation Step	What the element class attribute looks like
  1. $animate.enter(...) is called	class="my-animation"
  2. element is inserted into the parentElement element or beside the afterElement element	class="my-animation"
  3. $animate runs any JavaScript-defined animations on the element	class="my-animation ng-animate"
  4. the .ng-enter class is added to the element	class="my-animation ng-animate ng-enter"
  5. $animate scans the element styles to get the CSS transition/animation duration and delay	class="my-animation ng-animate ng-enter"
  6. $animate waits for 10ms (this performs a reflow)	class="my-animation ng-animate ng-enter"
  7. the .ng-enter-active and .ng-animate-active classes are added (this triggers the CSS transition/animation)	class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active"
  8. $animate waits for X milliseconds for the animation to complete	class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active"
  9. The animation ends and all generated CSS classes are removed from the element	class="my-animation"
  10. The doneCallback() callback is fired (if provided)	class="my-animation"

  Parameters

  Param	Type	Details
  element	DOMElement	the element that will be the focus of the enter animation
  parentElement	DOMElement	the parent element of the element that will be the focus of the enter animation
  afterElement	DOMElement	the sibling element (which is the previous element) of the element that will be the focus of the enter animation
  doneCallback (optional)	function()=	the callback function that will be called once the animation is complete

• leave(element, [doneCallback]);

  Runs the leave animation operation and, upon completion, removes the element from the DOM. Once the animation is started, the following CSS classes will be added for the duration of the animation:

  Below is a breakdown of each step that occurs during leave animation:

  Animation Step	What the element class attribute looks like
  1. $animate.leave(...) is called	class="my-animation"
  2. $animate runs any JavaScript-defined animations on the element	class="my-animation ng-animate"
  3. the .ng-leave class is added to the element	class="my-animation ng-animate ng-leave"
  4. $animate scans the element styles to get the CSS transition/animation duration and delay	class="my-animation ng-animate ng-leave"
  5. $animate waits for 10ms (this performs a reflow)	class="my-animation ng-animate ng-leave"
  6. the .ng-leave-active and .ng-animate-active classes is added (this triggers the CSS transition/animation)	class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active"
  7. $animate waits for X milliseconds for the animation to complete	class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active"
  8. The animation ends and all generated CSS classes are removed from the element	class="my-animation"
  9. The element is removed from the DOM	...
  10. The doneCallback() callback is fired (if provided)	...

  Parameters

  Param	Type	Details
  element	DOMElement	the element that will be the focus of the leave animation
  doneCallback (optional)	function()=	the callback function that will be called once the animation is complete

• move(element, parentElement, afterElement, [doneCallback]);

  Fires the move DOM operation. Just before the animation starts, the animate service will either append it into the parentElement container or add the element directly after the afterElement element if present. Then the move animation will be run. Once the animation is started, the following CSS classes will be added for the duration of the animation:

  Below is a breakdown of each step that occurs during move animation:

  Animation Step	What the element class attribute looks like
  1. $animate.move(...) is called	class="my-animation"
  2. element is moved into the parentElement element or beside the afterElement element	class="my-animation"
  3. $animate runs any JavaScript-defined animations on the element	class="my-animation ng-animate"
  4. the .ng-move class is added to the element	class="my-animation ng-animate ng-move"
  5. $animate scans the element styles to get the CSS transition/animation duration and delay	class="my-animation ng-animate ng-move"
  6. $animate waits for 10ms (this performs a reflow)	class="my-animation ng-animate ng-move"
  7. the .ng-move-active and .ng-animate-active classes is added (this triggers the CSS transition/animation)	class="my-animation ng-animate ng-animate-active ng-move ng-move-active"
  8. $animate waits for X milliseconds for the animation to complete	class="my-animation ng-animate ng-animate-active ng-move ng-move-active"
  9. The animation ends and all generated CSS classes are removed from the element	class="my-animation"
  10. The doneCallback() callback is fired (if provided)	class="my-animation"

  Parameters

  Param	Type	Details
  element	DOMElement	the element that will be the focus of the move animation
  parentElement	DOMElement	the parentElement element of the element that will be the focus of the move animation
  afterElement	DOMElement	the sibling element (which is the previous element) of the element that will be the focus of the move animation
  doneCallback (optional)	function()=	the callback function that will be called once the animation is complete

• addClass(element, className, [doneCallback]);

  Triggers a custom animation event based off the className variable and then attaches the className value to the element as a CSS class. Unlike the other animation methods, the animate service will suffix the className value with -add in order to provide the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if no CSS transitions or keyframes are defined on the -add or base CSS class).

  Below is a breakdown of each step that occurs during addClass animation:

  Animation Step	What the element class attribute looks like
  1. $animate.addClass(element, 'super') is called	class="my-animation"
  2. $animate runs any JavaScript-defined animations on the element	class="my-animation ng-animate"
  3. the .super-add class are added to the element	class="my-animation ng-animate super-add"
  4. $animate scans the element styles to get the CSS transition/animation duration and delay	class="my-animation ng-animate super-add"
  5. $animate waits for 10ms (this performs a reflow)	class="my-animation ng-animate super-add"
  6. the .super, .super-add-active and .ng-animate-active classes are added (this triggers the CSS transition/animation)	class="my-animation ng-animate ng-animate-active super super-add super-add-active"
  7. $animate waits for X milliseconds for the animation to complete	class="my-animation super super-add super-add-active"
  8. The animation ends and all generated CSS classes are removed from the element	class="my-animation super"
  9. The super class is kept on the element	class="my-animation super"
  10. The doneCallback() callback is fired (if provided)	class="my-animation super"

  Parameters

  Param	Type	Details
  element	DOMElement	the element that will be animated
  className	string	the CSS class that will be added to the element and then animated
  doneCallback (optional)	function()=	the callback function that will be called once the animation is complete

• removeClass(element, className, [doneCallback]);

  Triggers a custom animation event based off the className variable and then removes the CSS class provided by the className value from the element. Unlike the other animation methods, the animate service will suffix the className value with -remove in order to provide the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if no CSS transitions or keyframes are defined on the -remove or base CSS classes).

  Below is a breakdown of each step that occurs during removeClass animation:

  Animation Step	What the element class attribute looks like
  1. $animate.removeClass(element, 'super') is called	class="my-animation super"
  2. $animate runs any JavaScript-defined animations on the element	class="my-animation super ng-animate"
  3. the .super-remove class are added to the element	class="my-animation super ng-animate super-remove"
  4. $animate scans the element styles to get the CSS transition/animation duration and delay	class="my-animation super ng-animate super-remove"
  5. $animate waits for 10ms (this performs a reflow)	class="my-animation super ng-animate super-remove"
  6. the .super-remove-active and .ng-animate-active classes are added and .super is removed (this triggers the CSS transition/animation)	class="my-animation ng-animate ng-animate-active super-remove super-remove-active"
  7. $animate waits for X milliseconds for the animation to complete	class="my-animation ng-animate ng-animate-active super-remove super-remove-active"
  8. The animation ends and all generated CSS classes are removed from the element	class="my-animation"
  9. The doneCallback() callback is fired (if provided)	class="my-animation"

  Parameters

  Param	Type	Details
  element	DOMElement	the element that will be animated
  className	string	the CSS class that will be animated and then removed from the element
  doneCallback (optional)	function()=	the callback function that will be called once the animation is complete

• enabled([value], [element]);

  Globally enables/disables animations.

  Parameters

  Param	Type	Details
  value (optional)	boolean	If provided then set the animation on or off.
  element (optional)	DOMElement	If provided then the element will be used to represent the enable/disable operation

  Returns

  boolean

  Current animation state.