* The `ngAnimate` module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives.
*
* {@installModule animate}
*
* <div doc-module-components="ngAnimate"></div>
*
* # Usage
*
* To see animations in action, all that is required is to define the appropriate CSS classes
* or to register a JavaScript animation via the myModule.animation() function. The directives that support animation automatically are:
* `ngRepeat`, `ngInclude`, `ngIf`, `ngSwitch`, `ngShow`, `ngHide`, `ngView` and `ngClass`. Custom directives can take advantage of animation
* by using the `$animate` service.
*
* Below is a more detailed breakdown of the supported animation events provided by pre-existing ng directives:
//operation which performs CSS transition and keyframe
//animations sniffing. This is always included for each
//element animation procedure if the browser supports
//transitions and/or keyframe animations
if($sniffer.transitions||$sniffer.animations){
classes.push('');
}
for(vari=0;i<classes.length;i++){
varklass=classes[i],
selectorFactoryName=selectors[klass];
if(selectorFactoryName&&!flagMap[klass]){
matches.push($injector.get(selectorFactoryName));
flagMap[klass]=true;
}
}
returnmatches;
}
}
/**
* @ngdoc object
* @name ngAnimate.$animate
* @function
*
* @description
* The `$animate` service provides animation detection support while performing DOM operations (enter, leave and move) as well as during addClass and removeClass operations.
* When any of these operations are run, the $animate service
* will examine any JavaScript-defined animations (which are defined by using the $animateProvider provider object)
* as well as any CSS-defined animations against the CSS classes present on the element once the DOM operation is run.
*
* The `$animate` service is used behind the scenes with pre-existing directives and animation with these directives
* will work out of the box without any extra configuration.
*
* Requires the {@link ngAnimate `ngAnimate`} module to be installed.
*
* Please visit the {@link ngAnimate `ngAnimate`} module overview page learn more about how to use animations in your application.
*
*/
return{
/**
* @ngdoc function
* @name ngAnimate.$animate#enter
* @methodOf ngAnimate.$animate
* @function
*
* @description
* 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" |
*
* @param {jQuery/jqLite element} element the element that will be the focus of the enter animation
* @param {jQuery/jqLite element} parentElement the parent element of the element that will be the focus of the enter animation
* @param {jQuery/jqLite element} afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation
* @param {function()=} doneCallback the callback function that will be called once the animation is complete
*/
enter : function(element,parentElement,afterElement,doneCallback){
* | 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" |
*
* @param {jQuery/jqLite element} element the element that will be the focus of the move animation
* @param {jQuery/jqLite element} parentElement the parentElement element of the element that will be the focus of the move animation
* @param {jQuery/jqLite element} afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation
* @param {function()=} doneCallback the callback function that will be called once the animation is complete
* | 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-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" |
*
* @param {jQuery/jqLite element} element the element that will be animated
* @param {string} className the CSS class that will be added to the element and then animated
* @param {function()=} doneCallback the callback function that will be called once the animation is complete
* | 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" |
*
*
* @param {jQuery/jqLite element} element the element that will be animated
* @param {string} className the CSS class that will be animated and then removed from the element
* @param {function()=} doneCallback the callback function that will be called once the animation is complete