vendor/assets/javascripts/unstable/angular-animate.js in angularjs-rails-1.3.4 vs vendor/assets/javascripts/unstable/angular-animate.js in angularjs-rails-1.3.6
- old
+ new
@@ -1,7 +1,7 @@
/**
- * @license AngularJS v1.3.4
+ * @license AngularJS v1.3.36
* (c) 2010-2014 Google, Inc. http://angularjs.org
* License: MIT
*/
(function(window, angular, undefined) {'use strict';
@@ -17,11 +17,11 @@
* <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:
+ * 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:
*
@@ -159,12 +159,12 @@
* has no CSS transition/animation classes applied to it.
*
* ### 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
*
* Class-based transitions refer to transition animations that are triggered when a CSS class is
@@ -477,15 +477,16 @@
}
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
// compiled. The $templateRequest.totalPendingRequests variable keeps track of
// all of the remote templates being currently downloaded. If there are no
@@ -875,26 +876,26 @@
* });
* ```
*
* 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
* @param {object} to a collection of CSS styles that the element will animate towards
* @param {string=} className an optional CSS class that will be added to the element for the duration of the animation (the default class is `ng-inline-animate`)
@@ -921,25 +922,25 @@
* 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 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
* @param {DOMElement} afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation
* @param {object=} options an optional collection of options that will be picked up by the CSS transition/animation
@@ -967,25 +968,25 @@
* 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 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
* @return {Promise} the animation callback promise
*/
@@ -1012,25 +1013,25 @@
* 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 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
* @param {DOMElement} afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation
* @param {object=} options an optional collection of styles that will be picked up by the CSS transition/animation
@@ -1060,22 +1061,22 @@
* 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-active 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 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
* @param {object=} options an optional collection of styles that will be picked up by the CSS transition/animation
* @return {Promise} the animation callback promise
@@ -1094,21 +1095,21 @@
* 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 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
* @param {string} className the CSS class that will be animated and then removed from the element
* @param {object=} options an optional collection of styles that will be picked up by the CSS transition/animation
@@ -1122,23 +1123,23 @@
*
* @ngdoc method
* @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. | `class="my-animation on"` |
*
* @param {DOMElement} element the element which will have its CSS classes changed
* removed from it
* @param {string} add the CSS classes which will be added to the element
* @param {string} remove the CSS class which will be removed from the element
@@ -1272,11 +1273,11 @@
/*
all animations call this shared animation triggering function internally.
The animationEvent variable refers to the JavaScript animation event that will be triggered
and the className value is the name of the animation that will be applied within the
- CSS code. Element, parentElement and afterElement are provided DOM elements for the animation
+ CSS code. Element, `parentElement` and `afterElement` are provided DOM elements for the animation
and the onComplete callback will be fired once the animation is fully complete.
*/
function performAnimation(animationEvent, className, element, parentElement, afterElement, domOperation, options, doneCallback) {
var noopCancel = noop;
var runner = animationRunner(element, animationEvent, className, options);
@@ -1384,14 +1385,14 @@
});
}
//the ng-animate class does nothing, but it's here to allow for
//parent animations to find and cancel child animations when needed
- element.addClass(NG_ANIMATE_CLASS_NAME);
+ $$jqLite.addClass(element, NG_ANIMATE_CLASS_NAME);
if (options && options.tempClasses) {
forEach(options.tempClasses, function(className) {
- element.addClass(className);
+ $$jqLite.addClass(element, className);
});
}
var localAnimationCount = globalAnimationCounter++;
totalActiveAnimations++;
@@ -1465,11 +1466,11 @@
}
closeAnimation.hasBeenRun = true;
if (options && options.tempClasses) {
forEach(options.tempClasses, function(className) {
- element.removeClass(className);
+ $$jqLite.removeClass(element, className);
});
}
var data = element.data(NG_ANIMATE_STATE);
if (data) {
@@ -1527,11 +1528,11 @@
data.totalActive--;
delete data.active[className];
}
if (removeAnimations || !data.totalActive) {
- element.removeClass(NG_ANIMATE_CLASS_NAME);
+ $$jqLite.removeClass(element, NG_ANIMATE_CLASS_NAME);
element.removeData(NG_ANIMATE_STATE);
}
}
}
@@ -1768,26 +1769,26 @@
if (itemIndex > 0) {
var staggerClassName = className + '-stagger';
var staggerCacheKey = cacheKey + ' ' + staggerClassName;
var applyClasses = !lookupCache[staggerCacheKey];
- applyClasses && element.addClass(staggerClassName);
+ applyClasses && $$jqLite.addClass(element, staggerClassName);
stagger = getElementAnimationDetails(element, staggerCacheKey);
- applyClasses && element.removeClass(staggerClassName);
+ applyClasses && $$jqLite.removeClass(element, staggerClassName);
}
- element.addClass(className);
+ $$jqLite.addClass(element, className);
var formerData = element.data(NG_ANIMATE_CSS_DATA_KEY) || {};
var timings = getElementAnimationDetails(element, eventCacheKey);
var transitionDuration = timings.transitionDuration;
var animationDuration = timings.animationDuration;
if (structural && transitionDuration === 0 && animationDuration === 0) {
- element.removeClass(className);
+ $$jqLite.removeClass(element, className);
return false;
}
var blockTransition = styles || (structural && transitionDuration > 0);
var blockAnimation = animationDuration > 0 &&
@@ -1855,21 +1856,21 @@
staggerTime = Math.round(Math.max(transitionStaggerDelay, animationStaggerDelay) * 100) / 100;
}
if (!staggerTime) {
- element.addClass(activeClassName);
+ $$jqLite.addClass(element, activeClassName);
if (elementData.blockTransition) {
blockTransitions(node, false);
}
}
var eventCacheKey = elementData.cacheKey + ' ' + activeClassName;
var timings = getElementAnimationDetails(element, eventCacheKey);
var maxDuration = Math.max(timings.transitionDuration, timings.animationDuration);
if (maxDuration === 0) {
- element.removeClass(activeClassName);
+ $$jqLite.removeClass(element, activeClassName);
animateClose(element, className);
activeAnimationComplete();
return;
}
@@ -1900,23 +1901,23 @@
var animationTime = (maxDelay + maxDuration) * CLOSING_TIME_BUFFER;
var totalTime = (staggerTime + animationTime) * ONE_SECOND;
var staggerTimeout;
if (staggerTime > 0) {
- element.addClass(pendingClassName);
+ $$jqLite.addClass(element, pendingClassName);
staggerTimeout = $timeout(function() {
staggerTimeout = null;
if (timings.transitionDuration > 0) {
blockTransitions(node, false);
}
if (timings.animationDuration > 0) {
blockAnimations(node, false);
}
- element.addClass(activeClassName);
- element.removeClass(pendingClassName);
+ $$jqLite.addClass(element, activeClassName);
+ $$jqLite.removeClass(element, pendingClassName);
if (styles) {
if (timings.transitionDuration === 0) {
element.css('transition', timings.animationDuration + 's linear all');
}
@@ -1939,12 +1940,12 @@
// This will automatically be called by $animate so
// there is no need to attach this internally to the
// timeout done method.
function onEnd() {
element.off(css3AnimationEvents, onAnimationProgress);
- element.removeClass(activeClassName);
- element.removeClass(pendingClassName);
+ $$jqLite.removeClass(element, activeClassName);
+ $$jqLite.removeClass(element, pendingClassName);
if (staggerTimeout) {
$timeout.cancel(staggerTimeout);
}
animateClose(element, className);
var node = extractElementNode(element);
@@ -2028,10 +2029,10 @@
(cancel || noop)(cancelled);
};
}
function animateClose(element, className) {
- element.removeClass(className);
+ $$jqLite.removeClass(element, className);
var data = element.data(NG_ANIMATE_CSS_DATA_KEY);
if (data) {
if (data.running) {
data.running--;
}