summaryrefslogtreecommitdiffstats
path: root/js/vendor/angular-animate
diff options
context:
space:
mode:
authorBernhard Posselt <dev@bernhard-posselt.com>2014-12-23 12:50:15 +0100
committerBernhard Posselt <dev@bernhard-posselt.com>2014-12-23 12:50:15 +0100
commitf88f8fcb7f7451babc8aa20ecc0dad06dd27e1ed (patch)
treecb53495565d3a5757b6efc44c179b6d95b244721 /js/vendor/angular-animate
parent367a4eed30e9fa77a2aa5d7924f041e967f8567d (diff)
update jasmine, karma and angular
Diffstat (limited to 'js/vendor/angular-animate')
-rw-r--r--js/vendor/angular-animate/.bower.json10
-rw-r--r--js/vendor/angular-animate/angular-animate.js244
-rw-r--r--js/vendor/angular-animate/angular-animate.min.js56
-rw-r--r--js/vendor/angular-animate/angular-animate.min.js.map4
-rw-r--r--js/vendor/angular-animate/bower.json4
-rw-r--r--js/vendor/angular-animate/package.json2
6 files changed, 161 insertions, 159 deletions
diff --git a/js/vendor/angular-animate/.bower.json b/js/vendor/angular-animate/.bower.json
index badfab394..171a0cab5 100644
--- a/js/vendor/angular-animate/.bower.json
+++ b/js/vendor/angular-animate/.bower.json
@@ -1,17 +1,17 @@
{
"name": "angular-animate",
- "version": "1.3.5",
+ "version": "1.3.8",
"main": "./angular-animate.js",
"ignore": [],
"dependencies": {
- "angular": "1.3.5"
+ "angular": "1.3.8"
},
"homepage": "https://github.com/angular/bower-angular-animate",
- "_release": "1.3.5",
+ "_release": "1.3.8",
"_resolution": {
"type": "version",
- "tag": "v1.3.5",
- "commit": "f1ce791ecb58c64af1caac6253f93ecf3e2bf203"
+ "tag": "v1.3.8",
+ "commit": "673c705af49bb71c0b81c31b446b2f636cecd990"
},
"_source": "git://github.com/angular/bower-angular-animate.git",
"_target": "~1.3.3",
diff --git a/js/vendor/angular-animate/angular-animate.js b/js/vendor/angular-animate/angular-animate.js
index 761d622ea..eca7ca4c3 100644
--- a/js/vendor/angular-animate/angular-animate.js
+++ b/js/vendor/angular-animate/angular-animate.js
@@ -1,5 +1,5 @@
/**
- * @license AngularJS v1.3.5
+ * @license AngularJS v1.3.8
* (c) 2010-2014 Google, Inc. http://angularjs.org
* License: MIT
*/
@@ -19,7 +19,7 @@
* # 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:
+ * 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.
*
@@ -161,8 +161,8 @@
* ### Structural transition animations
*
* Structural transitions (such as enter, leave and move) will always apply a `0s none` transition
- * value to force the browser into rendering the styles defined in the setup (.ng-enter, .ng-leave
- * or .ng-move) class. This means that any active transition animations operating on the element
+ * value to force the browser into rendering the styles defined in the setup (`.ng-enter`, `.ng-leave`
+ * or `.ng-move`) class. This means that any active transition animations operating on the element
* will be cut off to make way for the enter, leave or move animation.
*
* ### Class-based transition animations
@@ -479,11 +479,12 @@ angular.module('ngAnimate', ['ng'])
function isMatchingElement(elm1, elm2) {
return extractElementNode(elm1) == extractElementNode(elm2);
}
-
+ var $$jqLite;
$provide.decorator('$animate',
- ['$delegate', '$$q', '$injector', '$sniffer', '$rootElement', '$$asyncCallback', '$rootScope', '$document', '$templateRequest',
- function($delegate, $$q, $injector, $sniffer, $rootElement, $$asyncCallback, $rootScope, $document, $templateRequest) {
+ ['$delegate', '$$q', '$injector', '$sniffer', '$rootElement', '$$asyncCallback', '$rootScope', '$document', '$templateRequest', '$$jqLite',
+ function($delegate, $$q, $injector, $sniffer, $rootElement, $$asyncCallback, $rootScope, $document, $templateRequest, $$$jqLite) {
+ $$jqLite = $$$jqLite;
$rootElement.data(NG_ANIMATE_STATE, rootAnimateState);
// Wait until all directive and route-related templates are downloaded and
@@ -838,7 +839,8 @@ angular.module('ngAnimate', ['ng'])
* promise that was returned when the animation was started.
*
* ```js
- * var promise = $animate.addClass(element, 'super-long-animation').then(function() {
+ * var promise = $animate.addClass(element, 'super-long-animation');
+ * promise.then(function() {
* //this will still be called even if cancelled
* });
*
@@ -877,22 +879,22 @@ angular.module('ngAnimate', ['ng'])
*
* Below is a breakdown of each step that occurs during the `animate` animation:
*
- * | Animation Step | What the element class attribute looks like |
- * |-------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------|
- * | 1. $animate.animate(...) is called | class="my-animation" |
- * | 2. $animate waits for the next digest to start the animation | class="my-animation ng-animate" |
- * | 3. $animate runs the JavaScript-defined animations detected on the element | class="my-animation ng-animate" |
- * | 4. the className class value is added to the element | class="my-animation ng-animate className" |
- * | 5. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate className" |
- * | 6. $animate blocks all CSS transitions on the element to ensure the .className class styling is applied right away| class="my-animation ng-animate className" |
- * | 7. $animate applies the provided collection of `from` CSS styles to the element | class="my-animation ng-animate className" |
- * | 8. $animate waits for a single animation frame (this performs a reflow) | class="my-animation ng-animate className" |
- * | 9. $animate removes the CSS transition block placed on the element | class="my-animation ng-animate className" |
- * | 10. the className-active class is added (this triggers the CSS transition/animation) | class="my-animation ng-animate className className-active" |
- * | 11. $animate applies the collection of `to` CSS styles to the element which are then handled by the transition | class="my-animation ng-animate className className-active" |
- * | 12. $animate waits for the animation to complete (via events and timeout) | class="my-animation ng-animate className className-active" |
- * | 13. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
- * | 14. The returned promise is resolved. | class="my-animation" |
+ * | Animation Step | What the element class attribute looks like |
+ * |-----------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------|
+ * | 1. `$animate.animate(...)` is called | `class="my-animation"` |
+ * | 2. `$animate` waits for the next digest to start the animation | `class="my-animation ng-animate"` |
+ * | 3. `$animate` runs the JavaScript-defined animations detected on the element | `class="my-animation ng-animate"` |
+ * | 4. the `className` class value is added to the element | `class="my-animation ng-animate className"` |
+ * | 5. `$animate` scans the element styles to get the CSS transition/animation duration and delay | `class="my-animation ng-animate className"` |
+ * | 6. `$animate` blocks all CSS transitions on the element to ensure the `.className` class styling is applied right away| `class="my-animation ng-animate className"` |
+ * | 7. `$animate` applies the provided collection of `from` CSS styles to the element | `class="my-animation ng-animate className"` |
+ * | 8. `$animate` waits for a single animation frame (this performs a reflow) | `class="my-animation ng-animate className"` |
+ * | 9. `$animate` removes the CSS transition block placed on the element | `class="my-animation ng-animate className"` |
+ * | 10. the `className-active` class is added (this triggers the CSS transition/animation) | `class="my-animation ng-animate className className-active"` |
+ * | 11. `$animate` applies the collection of `to` CSS styles to the element which are then handled by the transition | `class="my-animation ng-animate className className-active"` |
+ * | 12. `$animate` waits for the animation to complete (via events and timeout) | `class="my-animation ng-animate className className-active"` |
+ * | 13. The animation ends and all generated CSS classes are removed from the element | `class="my-animation"` |
+ * | 14. The returned promise is resolved. | `class="my-animation"` |
*
* @param {DOMElement} element the element that will be the focus of the enter animation
* @param {object} from a collection of CSS styles that will be applied to the element at the start of the animation
@@ -923,21 +925,21 @@ angular.module('ngAnimate', ['ng'])
*
* 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 waits for the next digest to start the animation | class="my-animation ng-animate" |
- * | 4. $animate runs the JavaScript-defined animations detected on the element | class="my-animation ng-animate" |
- * | 5. the .ng-enter class is added to the element | class="my-animation ng-animate ng-enter" |
- * | 6. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate ng-enter" |
- * | 7. $animate blocks all CSS transitions on the element to ensure the .ng-enter class styling is applied right away | class="my-animation ng-animate ng-enter" |
- * | 8. $animate waits for a single animation frame (this performs a reflow) | class="my-animation ng-animate ng-enter" |
- * | 9. $animate removes the CSS transition block placed on the element | class="my-animation ng-animate ng-enter" |
- * | 10. the .ng-enter-active class is added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-enter ng-enter-active" |
- * | 11. $animate waits for the animation to complete (via events and timeout) | class="my-animation ng-animate ng-enter ng-enter-active" |
- * | 12. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
- * | 13. The returned promise is resolved. | class="my-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` waits for the next digest to start the animation | `class="my-animation ng-animate"` |
+ * | 4. `$animate` runs the JavaScript-defined animations detected on the element | `class="my-animation ng-animate"` |
+ * | 5. the `.ng-enter` class is added to the element | `class="my-animation ng-animate ng-enter"` |
+ * | 6. `$animate` scans the element styles to get the CSS transition/animation duration and delay | `class="my-animation ng-animate ng-enter"` |
+ * | 7. `$animate` blocks all CSS transitions on the element to ensure the `.ng-enter` class styling is applied right away | `class="my-animation ng-animate ng-enter"` |
+ * | 8. `$animate` waits for a single animation frame (this performs a reflow) | `class="my-animation ng-animate ng-enter"` |
+ * | 9. `$animate` removes the CSS transition block placed on the element | `class="my-animation ng-animate ng-enter"` |
+ * | 10. the `.ng-enter-active` class is added (this triggers the CSS transition/animation) | `class="my-animation ng-animate ng-enter ng-enter-active"` |
+ * | 11. `$animate` waits for the animation to complete (via events and timeout) | `class="my-animation ng-animate ng-enter ng-enter-active"` |
+ * | 12. The animation ends and all generated CSS classes are removed from the element | `class="my-animation"` |
+ * | 13. The returned promise is resolved. | `class="my-animation"` |
*
* @param {DOMElement} element the element that will be the focus of the enter animation
* @param {DOMElement} parentElement the parent element of the element that will be the focus of the enter animation
@@ -969,21 +971,21 @@ angular.module('ngAnimate', ['ng'])
*
* 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 the JavaScript-defined animations detected on the element | class="my-animation ng-animate" |
- * | 3. $animate waits for the next digest to start the animation | class="my-animation ng-animate" |
- * | 4. the .ng-leave class is added to the element | class="my-animation ng-animate ng-leave" |
- * | 5. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate ng-leave" |
- * | 6. $animate blocks all CSS transitions on the element to ensure the .ng-leave class styling is applied right away | class="my-animation ng-animate ng-leave" |
- * | 7. $animate waits for a single animation frame (this performs a reflow) | class="my-animation ng-animate ng-leave" |
- * | 8. $animate removes the CSS transition block placed on the element | class="my-animation ng-animate ng-leave" |
- * | 9. the .ng-leave-active class is added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-leave ng-leave-active" |
- * | 10. $animate waits for the animation to complete (via events and timeout) | class="my-animation ng-animate ng-leave ng-leave-active" |
- * | 11. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
- * | 12. The element is removed from the DOM | ... |
- * | 13. The returned promise is resolved. | ... |
+ * | Animation Step | What the element class attribute looks like |
+ * |-----------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------|
+ * | 1. `$animate.leave(...)` is called | `class="my-animation"` |
+ * | 2. `$animate` runs the JavaScript-defined animations detected on the element | `class="my-animation ng-animate"` |
+ * | 3. `$animate` waits for the next digest to start the animation | `class="my-animation ng-animate"` |
+ * | 4. the `.ng-leave` class is added to the element | `class="my-animation ng-animate ng-leave"` |
+ * | 5. `$animate` scans the element styles to get the CSS transition/animation duration and delay | `class="my-animation ng-animate ng-leave"` |
+ * | 6. `$animate` blocks all CSS transitions on the element to ensure the `.ng-leave` class styling is applied right away | `class="my-animation ng-animate ng-leave"` |
+ * | 7. `$animate` waits for a single animation frame (this performs a reflow) | `class="my-animation ng-animate ng-leave"` |
+ * | 8. `$animate` removes the CSS transition block placed on the element | `class="my-animation ng-animate ng-leave"` |
+ * | 9. the `.ng-leave-active` class is added (this triggers the CSS transition/animation) | `class="my-animation ng-animate ng-leave ng-leave-active"` |
+ * | 10. `$animate` waits for the animation to complete (via events and timeout) | `class="my-animation ng-animate ng-leave ng-leave-active"` |
+ * | 11. The animation ends and all generated CSS classes are removed from the element | `class="my-animation"` |
+ * | 12. The element is removed from the DOM | ... |
+ * | 13. The returned promise is resolved. | ... |
*
* @param {DOMElement} element the element that will be the focus of the leave animation
* @param {object=} options an optional collection of styles that will be picked up by the CSS transition/animation
@@ -1014,21 +1016,21 @@ angular.module('ngAnimate', ['ng'])
*
* 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 waits for the next digest to start the animation | class="my-animation ng-animate" |
- * | 4. $animate runs the JavaScript-defined animations detected on the element | class="my-animation ng-animate" |
- * | 5. the .ng-move class is added to the element | class="my-animation ng-animate ng-move" |
- * | 6. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate ng-move" |
- * | 7. $animate blocks all CSS transitions on the element to ensure the .ng-move class styling is applied right away | class="my-animation ng-animate ng-move" |
- * | 8. $animate waits for a single animation frame (this performs a reflow) | class="my-animation ng-animate ng-move" |
- * | 9. $animate removes the CSS transition block placed on the element | class="my-animation ng-animate ng-move" |
- * | 10. the .ng-move-active class is added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-move ng-move-active" |
- * | 11. $animate waits for the animation to complete (via events and timeout) | class="my-animation ng-animate ng-move ng-move-active" |
- * | 12. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
- * | 13. The returned promise is resolved. | class="my-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` waits for the next digest to start the animation | `class="my-animation ng-animate"` |
+ * | 4. `$animate` runs the JavaScript-defined animations detected on the element | `class="my-animation ng-animate"` |
+ * | 5. the `.ng-move` class is added to the element | `class="my-animation ng-animate ng-move"` |
+ * | 6. `$animate` scans the element styles to get the CSS transition/animation duration and delay | `class="my-animation ng-animate ng-move"` |
+ * | 7. `$animate` blocks all CSS transitions on the element to ensure the `.ng-move` class styling is applied right away | `class="my-animation ng-animate ng-move"` |
+ * | 8. `$animate` waits for a single animation frame (this performs a reflow) | `class="my-animation ng-animate ng-move"` |
+ * | 9. `$animate` removes the CSS transition block placed on the element | `class="my-animation ng-animate ng-move"` |
+ * | 10. the `.ng-move-active` class is added (this triggers the CSS transition/animation) | `class="my-animation ng-animate ng-move ng-move-active"` |
+ * | 11. `$animate` waits for the animation to complete (via events and timeout) | `class="my-animation ng-animate ng-move ng-move-active"` |
+ * | 12. The animation ends and all generated CSS classes are removed from the element | `class="my-animation"` |
+ * | 13. The returned promise is resolved. | `class="my-animation"` |
*
* @param {DOMElement} element the element that will be the focus of the move animation
* @param {DOMElement} parentElement the parentElement element of the element that will be the focus of the move animation
@@ -1062,18 +1064,18 @@ angular.module('ngAnimate', ['ng'])
*
* 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 the JavaScript-defined animations detected on the element | class="my-animation ng-animate" |
- * | 3. the .super-add class is added to the element | class="my-animation ng-animate super-add" |
- * | 4. $animate waits for a single animation frame (this performs a reflow) | class="my-animation ng-animate super-add" |
- * | 5. the .super and .super-add-active classes are added (this triggers the CSS transition/animation) | class="my-animation ng-animate super super-add super-add-active" |
- * | 6. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate super super-add super-add-active" |
- * | 7. $animate waits for the animation to complete (via events and timeout) | class="my-animation ng-animate 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 returned promise is resolved. | class="my-animation super" |
+ * | Animation Step | What the element class attribute looks like |
+ * |--------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------|
+ * | 1. `$animate.addClass(element, 'super')` is called | `class="my-animation"` |
+ * | 2. `$animate` runs the JavaScript-defined animations detected on the element | `class="my-animation ng-animate"` |
+ * | 3. the `.super-add` class is added to the element | `class="my-animation ng-animate super-add"` |
+ * | 4. `$animate` waits for a single animation frame (this performs a reflow) | `class="my-animation ng-animate super-add"` |
+ * | 5. the `.super` and `.super-add-active` classes are added (this triggers the CSS transition/animation) | `class="my-animation ng-animate super super-add super-add-active"` |
+ * | 6. `$animate` scans the element styles to get the CSS transition/animation duration and delay | `class="my-animation ng-animate super super-add super-add-active"` |
+ * | 7. `$animate` waits for the animation to complete (via events and timeout) | `class="my-animation ng-animate 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 returned promise is resolved. | `class="my-animation super"` |
*
* @param {DOMElement} element the element that will be animated
* @param {string} className the CSS class that will be added to the element and then animated
@@ -1096,17 +1098,17 @@ angular.module('ngAnimate', ['ng'])
*
* 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 the JavaScript-defined animations detected on the element | class="my-animation super ng-animate" |
- * | 3. the .super-remove class is added to the element | class="my-animation super ng-animate super-remove" |
- * | 4. $animate waits for a single animation frame (this performs a reflow) | class="my-animation super ng-animate super-remove" |
- * | 5. the .super-remove-active classes are added and .super is removed (this triggers the CSS transition/animation) | class="my-animation ng-animate super-remove super-remove-active" |
- * | 6. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate super-remove super-remove-active" |
- * | 7. $animate waits for the animation to complete (via events and timeout) | class="my-animation ng-animate super-remove super-remove-active" |
- * | 8. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
- * | 9. The returned promise is resolved. | class="my-animation" |
+ * | Animation Step | What the element class attribute looks like |
+ * |----------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------|
+ * | 1. `$animate.removeClass(element, 'super')` is called | `class="my-animation super"` |
+ * | 2. `$animate` runs the JavaScript-defined animations detected on the element | `class="my-animation super ng-animate"` |
+ * | 3. the `.super-remove` class is added to the element | `class="my-animation super ng-animate super-remove"` |
+ * | 4. `$animate` waits for a single animation frame (this performs a reflow) | `class="my-animation super ng-animate super-remove"` |
+ * | 5. the `.super-remove-active` classes are added and `.super` is removed (this triggers the CSS transition/animation) | `class="my-animation ng-animate super-remove super-remove-active"` |
+ * | 6. `$animate` scans the element styles to get the CSS transition/animation duration and delay | `class="my-animation ng-animate super-remove super-remove-active"` |
+ * | 7. `$animate` waits for the animation to complete (via events and timeout) | `class="my-animation ng-animate super-remove super-remove-active"` |
+ * | 8. The animation ends and all generated CSS classes are removed from the element | `class="my-animation"` |
+ * | 9. The returned promise is resolved. | `class="my-animation"` |
*
*
* @param {DOMElement} element the element that will be animated
@@ -1124,19 +1126,19 @@ angular.module('ngAnimate', ['ng'])
* @name $animate#setClass
*
* @description Adds and/or removes the given CSS classes to and from the element.
- * Once complete, the done() callback will be fired (if provided).
+ * Once complete, the `done()` callback will be fired (if provided).
*
- * | Animation Step | What the element class attribute looks like |
- * |--------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------|
- * | 1. $animate.setClass(element, 'on', 'off') is called | class="my-animation off" |
- * | 2. $animate runs the JavaScript-defined animations detected on the element | class="my-animation ng-animate off" |
- * | 3. the .on-add and .off-remove classes are added to the element | class="my-animation ng-animate on-add off-remove off" |
- * | 4. $animate waits for a single animation frame (this performs a reflow) | class="my-animation ng-animate on-add off-remove off" |
- * | 5. the .on, .on-add-active and .off-remove-active classes are added and .off is removed (this triggers the CSS transition/animation) | class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active" |
- * | 6. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active" |
- * | 7. $animate waits for the animation to complete (via events and timeout) | class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active" |
- * | 8. The animation ends and all generated CSS classes are removed from the element | class="my-animation on" |
- * | 9. The returned promise is resolved. | class="my-animation on" |
+ * | Animation Step | What the element class attribute looks like |
+ * |----------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|
+ * | 1. `$animate.setClass(element, 'on', 'off')` is called | `class="my-animation off"` |
+ * | 2. `$animate` runs the JavaScript-defined animations detected on the element | `class="my-animation ng-animate off"` |
+ * | 3. the `.on-add` and `.off-remove` classes are added to the element | `class="my-animation ng-animate on-add off-remove off"` |
+ * | 4. `$animate` waits for a single animation frame (this performs a reflow) | `class="my-animation ng-animate on-add off-remove off"` |
+ * | 5. the `.on`, `.on-add-active` and `.off-remove-active` classes are added and `.off` is removed (this triggers the CSS transition/animation) | `class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active"` |
+ * | 6. `$animate` scans the element styles to get the CSS transition/animation duration and delay | `class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active"` |
+ * | 7. `$animate` waits for the animation to complete (via events and timeout) | `class="my-animation ng-animate on on-add on-add-active off-remove off-remove-active"` |
+ * | 8. The animation ends and all generated CSS classes are removed from the element | `class="my-animation on"` |
+ * | 9. The returned promise is resolved.