kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-28 21:05:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat($animate): use promises instead of callbacks for animations

Browse Source 
The $animate service (both the service inside of ng and ngAnimate) now
makes use of promises instead of callback functions.

BREAKING CHANGE

Both the API for the cancallation method and the done callback for
$animate animations is different. Instead of using a callback function
for each of the $animate animation methods, a promise is used instead.

```js
//before
$animate.enter(element, container, null, callbackFn);

//after
$animate.enter(element, container).then(callbackFn);
```

The animation can now be cancelled via `$animate.cancel(promise)`.

```js
//before
var cancelFn = $animate.enter(element, container);
cancelFn(); //cancels the animation

//after
var promise = $animate.enter(element, container);
$animate.cancel(promise); //cancels the animation
```
This commit is contained in:
Matias Niemelä
2014-08-15 23:45:29 -04:00
parent 2f4437b3a1
commit bf0f5502b1
16 changed files with 311 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/ng/animate.js
View File

@@ -81,10 +81,20 @@ var $AnimateProvider = ['$provide', function($provide) {
return this.$$classNameFilter; return this.$$classNameFilter;
}; };
this.$get = ['$timeout', '$$asyncCallback', function($timeout, $$asyncCallback) { this.$get = ['$$q', '$$asyncCallback', function($$q, $$asyncCallback) {
function async(fn) { var currentDefer;
fn && $$asyncCallback(fn); function asyncPromise() {
// only serve one instance of a promise in order to save CPU cycles
if (!currentDefer) {
currentDefer = $$q.defer();
currentDefer.promise.cancel = noop; //ngAnimate.$animate provides this
$$asyncCallback(function() {
currentDefer.resolve();
currentDefer = null;
});
}
return currentDefer.promise;
} }
/** /**
@@ -112,22 +122,19 @@ var $AnimateProvider = ['$provide', function($provide) {
* @name $animate#enter * @name $animate#enter
* @kind function * @kind function
* @description Inserts the element into the DOM either after the `after` element or * @description Inserts the element into the DOM either after the `after` element or
* as the first child within the `parent` element. Once complete, the done() callback * as the first child within the `parent` element. When the function is called a promise
* will be fired (if provided). * is returned that will be resolved at a later time.
* @param {DOMElement} element the element which will be inserted into the DOM * @param {DOMElement} element the element which will be inserted into the DOM
* @param {DOMElement} parent the parent element which will append the element as * @param {DOMElement} parent the parent element which will append the element as
* a child (if the after element is not present) * a child (if the after element is not present)
* @param {DOMElement} after the sibling element which will append the element * @param {DOMElement} after the sibling element which will append the element
* after itself * after itself
* @param {Function=} done callback function that will be called after the element has been * @return {Promise} the animation callback promise
* inserted into the DOM
*/ */
enter : function(element, parent, after, done) { enter : function(element, parent, after) {
after after ? after.after(element)
? after.after(element) : parent.prepend(element);
: parent.prepend(element); return asyncPromise();
async(done);
return noop;
}, },
/** /**
@@ -135,16 +142,14 @@ var $AnimateProvider = ['$provide', function($provide) {
* @ngdoc method * @ngdoc method
* @name $animate#leave * @name $animate#leave
* @kind function * @kind function
* @description Removes the element from the DOM. Once complete, the done() callback will be * @description Removes the element from the DOM. When the function is called a promise
* fired (if provided). * is returned that will be resolved at a later time.
* @param {DOMElement} element the element which will be removed from the DOM * @param {DOMElement} element the element which will be removed from the DOM
* @param {Function=} done callback function that will be called after the element has been * @return {Promise} the animation callback promise
* removed from the DOM
*/ */
leave : function(element, done) { leave : function(element) {
element.remove(); element.remove();
async(done); return asyncPromise();
return noop;
}, },
/** /**
@@ -153,8 +158,8 @@ var $AnimateProvider = ['$provide', function($provide) {
* @name $animate#move * @name $animate#move
* @kind function * @kind function
* @description Moves the position of the provided element within the DOM to be placed * @description Moves the position of the provided element within the DOM to be placed
* either after the `after` element or inside of the `parent` element. Once complete, the * either after the `after` element or inside of the `parent` element. When the function
* done() callback will be fired (if provided). * is called a promise is returned that will be resolved at a later time.
* *
* @param {DOMElement} element the element which will be moved around within the * @param {DOMElement} element the element which will be moved around within the
* DOM * DOM
@@ -162,13 +167,12 @@ var $AnimateProvider = ['$provide', function($provide) {
* inserted into (if the after element is not present) * inserted into (if the after element is not present)
* @param {DOMElement} after the sibling element where the element will be * @param {DOMElement} after the sibling element where the element will be
* positioned next to * positioned next to
* @param {Function=} done the callback function (if provided) that will be fired after the * @return {Promise} the animation callback promise
* element has been moved to its new position
*/ */
move : function(element, parent, after, done) { move : function(element, parent, after) {
// Do not remove element before insert. Removing will cause data associated with the // Do not remove element before insert. Removing will cause data associated with the
// element to be dropped. Insert will implicitly do the remove. // element to be dropped. Insert will implicitly do the remove.
return this.enter(element, parent, after, done); return this.enter(element, parent, after);
}, },
/** /**
@@ -176,23 +180,21 @@ var $AnimateProvider = ['$provide', function($provide) {
* @ngdoc method * @ngdoc method
* @name $animate#addClass * @name $animate#addClass
* @kind function * @kind function
* @description Adds the provided className CSS class value to the provided element. Once * @description Adds the provided className CSS class value to the provided element.
* complete, the done() callback will be fired (if provided). * When the function is called a promise is returned that will be resolved at a later time.
* @param {DOMElement} element the element which will have the className value * @param {DOMElement} element the element which will have the className value
* added to it * added to it
* @param {string} className the CSS class which will be added to the element * @param {string} className the CSS class which will be added to the element
* @param {Function=} done the callback function (if provided) that will be fired after the * @return {Promise} the animation callback promise
* className value has been added to the element
*/ */
addClass : function(element, className, done) { addClass : function(element, className) {
className = !isString(className) className = !isString(className)
? (isArray(className) ? className.join(' ') : '') ? (isArray(className) ? className.join(' ') : '')
: className; : className;
forEach(element, function (element) { forEach(element, function (element) {
jqLiteAddClass(element, className); jqLiteAddClass(element, className);
}); });
async(done); return asyncPromise();
return noop;
}, },
/** /**
@@ -201,22 +203,20 @@ var $AnimateProvider = ['$provide', function($provide) {
* @name $animate#removeClass * @name $animate#removeClass
* @kind function * @kind function
* @description Removes the provided className CSS class value from the provided element. * @description Removes the provided className CSS class value from the provided element.
* Once complete, the done() callback will be fired (if provided). * When the function is called a promise is returned that will be resolved at a later time.
* @param {DOMElement} element the element which will have the className value * @param {DOMElement} element the element which will have the className value
* removed from it * removed from it
* @param {string} className the CSS class which will be removed from the element * @param {string} className the CSS class which will be removed from the element
* @param {Function=} done the callback function (if provided) that will be fired after the * @return {Promise} the animation callback promise
* className value has been removed from the element
*/ */
removeClass : function(element, className, done) { removeClass : function(element, className) {
className = isString(className) ? className = !isString(className)
className : ? (isArray(className) ? className.join(' ') : '')
isArray(className) ? className.join(' ') : ''; : className;
forEach(element, function (element) { forEach(element, function (element) {
jqLiteRemoveClass(element, className); jqLiteRemoveClass(element, className);
}); });
async(done); return asyncPromise();
return noop;
}, },
/** /**
@@ -225,22 +225,21 @@ var $AnimateProvider = ['$provide', function($provide) {
* @name $animate#setClass * @name $animate#setClass
* @kind function * @kind function
* @description Adds and/or removes the given CSS classes to and from the element. * @description Adds and/or removes the given CSS classes to and from the element.
* Once complete, the done() callback will be fired (if provided). * When the function is called a promise is returned that will be resolved at a later time.
* @param {DOMElement} element the element which will have its CSS classes changed * @param {DOMElement} element the element which will have its CSS classes changed
* removed from it * removed from it
* @param {string} add the CSS classes which will be added to the element * @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 * @param {string} remove the CSS class which will be removed from the element
* @param {Function=} done the callback function (if provided) that will be fired after the * @return {Promise} the animation callback promise
* CSS classes have been set on the element
*/ */
setClass : function(element, add, remove, done) { setClass : function(element, add, remove) {
this.addClass(element, add); this.addClass(element, add);
this.removeClass(element, remove); this.removeClass(element, remove);
async(done); return asyncPromise();
return noop;
}, },
enabled : noop enabled : noop,
cancel : noop
}; };
}]; }];
}]; }];

2
src/ng/directive/ngIf.js
View File

@@ -113,7 +113,7 @@ var ngIfDirective = ['$animate', function($animate) {
} }
if(block) { if(block) {
previousElements = getBlockNodes(block.clone); previousElements = getBlockNodes(block.clone);
$animate.leave(previousElements, function() { $animate.leave(previousElements).then(function() {
previousElements = null; previousElements = null;
}); });
block = null; block = null;

4
src/ng/directive/ngInclude.js
View File

@@ -198,7 +198,7 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$animate'
currentScope = null; currentScope = null;
} }
if(currentElement) { if(currentElement) {
$animate.leave(currentElement, function() { $animate.leave(currentElement).then(function() {
previousElement = null; previousElement = null;
}); });
previousElement = currentElement; previousElement = currentElement;
@@ -228,7 +228,7 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$animate'
// directives to non existing elements. // directives to non existing elements.
var clone = $transclude(newScope, function(clone) { var clone = $transclude(newScope, function(clone) {
cleanupLastIncludeContent(); cleanupLastIncludeContent();
$animate.enter(clone, null, $element, afterAnimation); $animate.enter(clone, null, $element).then(afterAnimation);
}); });
currentScope = newScope; currentScope = newScope;

2
src/ng/directive/ngSwitch.js
View File

@@ -155,7 +155,7 @@ var ngSwitchDirective = ['$animate', function($animate) {
var selected = getBlockNodes(selectedElements[i].clone); var selected = getBlockNodes(selectedElements[i].clone);
selectedScopes[i].$destroy(); selectedScopes[i].$destroy();
previousElements[i] = selected; previousElements[i] = selected;
$animate.leave(selected, function() { $animate.leave(selected).then(function() {
previousElements.splice(i, 1); previousElements.splice(i, 1);
}); });
} }

163
src/ngAnimate/animate.js
View File

@@ -264,7 +264,7 @@
* *
* Stagger animations are currently only supported within CSS-defined animations. * Stagger animations are currently only supported within CSS-defined animations.
* *
* <h2>JavaScript-defined Animations</h2> * ## JavaScript-defined Animations
* In the event that you do not want to use CSS3 transitions or CSS3 animations or if you wish to offer animations on browsers that do not * In the event that you do not want to use CSS3 transitions or CSS3 animations or if you wish to offer animations on browsers that do not
* yet support CSS transitions/animations, then you can make use of JavaScript animations defined inside of your AngularJS module. * yet support CSS transitions/animations, then you can make use of JavaScript animations defined inside of your AngularJS module.
* *
@@ -395,8 +395,9 @@ angular.module('ngAnimate', ['ng'])
return extractElementNode(elm1) == extractElementNode(elm2); return extractElementNode(elm1) == extractElementNode(elm2);
} }
$provide.decorator('$animate', ['$delegate', '$injector', '$sniffer', '$rootElement', '$$asyncCallback', '$rootScope', '$document', $provide.decorator('$animate',
function($delegate, $injector, $sniffer, $rootElement, $$asyncCallback, $rootScope, $document) { ['$delegate', '$$q', '$injector', '$sniffer', '$rootElement', '$$asyncCallback', '$rootScope', '$document',
function($delegate, $$q, $injector, $sniffer, $rootElement, $$asyncCallback, $rootScope, $document) {
var globalAnimationCounter = 0; var globalAnimationCounter = 0;
$rootElement.data(NG_ANIMATE_STATE, rootAnimateState); $rootElement.data(NG_ANIMATE_STATE, rootAnimateState);
@@ -431,13 +432,16 @@ angular.module('ngAnimate', ['ng'])
} }
function runAnimationPostDigest(fn) { function runAnimationPostDigest(fn) {
var cancelFn; var cancelFn, defer = $$q.defer();
$rootScope.$$postDigest(function() { defer.promise.$$cancelFn = function() {
cancelFn = fn();
});
return function() {
cancelFn && cancelFn(); cancelFn && cancelFn();
}; };
$rootScope.$$postDigest(function() {
cancelFn = fn(function() {
defer.resolve();
});
});
return defer.promise;
} }
function resolveElementClasses(element, cache, runningAnimations) { function resolveElementClasses(element, cache, runningAnimations) {
@@ -678,7 +682,7 @@ angular.module('ngAnimate', ['ng'])
/** /**
* @ngdoc service * @ngdoc service
* @name $animate * @name $animate
* @kind function * @kind object
* *
* @description * @description
* The `$animate` service provides animation detection support while performing DOM operations (enter, leave and move) as well as during addClass and removeClass operations. * The `$animate` service provides animation detection support while performing DOM operations (enter, leave and move) as well as during addClass and removeClass operations.
@@ -692,6 +696,46 @@ angular.module('ngAnimate', ['ng'])
* Requires the {@link ngAnimate `ngAnimate`} module to be installed. * 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. * Please visit the {@link ngAnimate `ngAnimate`} module overview page learn more about how to use animations in your application.
* ## Callback Promises
* With AngularJS 1.3, each of the animation methods, on the `$animate` service, return a promise when called. The
* promise itself is then resolved once the animation has completed itself, has been cancelled or has been
* skipped due to animations being disabled. (Note that even if the animation is cancelled it will still
* call the resolve function of the animation.)
*
* ```js
* $animate.enter(element, container).then(function() {
* //...this is called once the animation is complete...
* });
* ```
*
* Also note that, due to the nature of the callback promise, if any Angular-specific code (like changing the scope,
* location of the page, etc...) is executed within the callback promise then be sure to wrap the code using
* `$scope.$apply(...)`;
*
* ```js
* $animate.leave(element).then(function() {
* $scope.$apply(function() {
* $location.path('/new-page');
* });
* });
* ```
*
* An animation can also be cancelled by calling the `$animate.cancel(promise)` method with the provided
* promise that was returned when the animation was started.
*
* ```js
* var promise = $animate.addClass(element, 'super-long-animation').then(function() {
* //this will still be called even if cancelled
* });
*
* element.on('click', function() {
* //tooo lazy to wait for the animation to end
* $animate.cancel(promise);
* });
* ```
*
* (Keep in mind that the promise cancellation is unique to `$animate` since promises in
* general cannot be cancelled.)
* *
*/ */
return { return {
@@ -720,23 +764,22 @@ angular.module('ngAnimate', ['ng'])
* | 10. the .ng-enter-active class is added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-enter ng-enter-active" | * | 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" | * | 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" | * | 12. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
* | 13. The doneCallback() callback is fired (if provided) | 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} 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} 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 {DOMElement} 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 * @return {Promise} the animation callback promise
* @return {function} the animation cancellation function
*/ */
enter : function(element, parentElement, afterElement, doneCallback) { enter : function(element, parentElement, afterElement) {
element = angular.element(element); element = angular.element(element);
parentElement = prepareElement(parentElement); parentElement = prepareElement(parentElement);
afterElement = prepareElement(afterElement); afterElement = prepareElement(afterElement);
classBasedAnimationsBlocked(element, true); classBasedAnimationsBlocked(element, true);
$delegate.enter(element, parentElement, afterElement); $delegate.enter(element, parentElement, afterElement);
return runAnimationPostDigest(function() { return runAnimationPostDigest(function(done) {
return performAnimation('enter', 'ng-enter', stripCommentsFromElement(element), parentElement, afterElement, noop, doneCallback); return performAnimation('enter', 'ng-enter', stripCommentsFromElement(element), parentElement, afterElement, noop, done);
}); });
}, },
@@ -765,22 +808,21 @@ angular.module('ngAnimate', ['ng'])
* | 10. $animate waits for the animation to complete (via events and timeout) | 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" | * | 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 | ... | * | 12. The element is removed from the DOM | ... |
* | 13. The doneCallback() callback is fired (if provided) | ... | * | 13. The returned promise is resolved. | ... |
* *
* @param {DOMElement} element the element that will be the focus of the leave animation * @param {DOMElement} element the element that will be the focus of the leave animation
* @param {function()=} doneCallback the callback function that will be called once the animation is complete * @return {Promise} the animation callback promise
* @return {function} the animation cancellation function
*/ */
leave : function(element, doneCallback) { leave : function(element) {
element = angular.element(element); element = angular.element(element);
cancelChildAnimations(element); cancelChildAnimations(element);
classBasedAnimationsBlocked(element, true); classBasedAnimationsBlocked(element, true);
this.enabled(false, element); this.enabled(false, element);
return runAnimationPostDigest(function() { return runAnimationPostDigest(function(done) {
return performAnimation('leave', 'ng-leave', stripCommentsFromElement(element), null, null, function() { return performAnimation('leave', 'ng-leave', stripCommentsFromElement(element), null, null, function() {
$delegate.leave(element); $delegate.leave(element);
}, doneCallback); }, done);
}); });
}, },
@@ -810,15 +852,14 @@ angular.module('ngAnimate', ['ng'])
* | 10. the .ng-move-active class is added (this triggers the CSS transition/animation) | class="my-animation ng-animate ng-move ng-move-active" | * | 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" | * | 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" | * | 12. The animation ends and all generated CSS classes are removed from the element | class="my-animation" |
* | 13. The doneCallback() callback is fired (if provided) | 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} 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} 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 {DOMElement} 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 * @return {Promise} the animation callback promise
* @return {function} the animation cancellation function
*/ */
move : function(element, parentElement, afterElement, doneCallback) { move : function(element, parentElement, afterElement) {
element = angular.element(element); element = angular.element(element);
parentElement = prepareElement(parentElement); parentElement = prepareElement(parentElement);
afterElement = prepareElement(afterElement); afterElement = prepareElement(afterElement);
@@ -826,8 +867,8 @@ angular.module('ngAnimate', ['ng'])
cancelChildAnimations(element); cancelChildAnimations(element);
classBasedAnimationsBlocked(element, true); classBasedAnimationsBlocked(element, true);
$delegate.move(element, parentElement, afterElement); $delegate.move(element, parentElement, afterElement);
return runAnimationPostDigest(function() { return runAnimationPostDigest(function(done) {
return performAnimation('move', 'ng-move', stripCommentsFromElement(element), parentElement, afterElement, noop, doneCallback); return performAnimation('move', 'ng-move', stripCommentsFromElement(element), parentElement, afterElement, noop, done);
}); });
}, },
@@ -854,15 +895,14 @@ angular.module('ngAnimate', ['ng'])
* | 7. $animate waits for the animation to complete (via events and timeout) | class="my-animation super super-add super-add-active" | * | 7. $animate waits for the animation to complete (via events and timeout) | 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" | * | 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" | * | 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" | * | 10. The returned promise is resolved. | class="my-animation super" |
* *
* @param {DOMElement} element the element that will be animated * @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 {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 * @return {Promise} the animation callback promise
* @return {function} the animation cancellation function
*/ */
addClass : function(element, className, doneCallback) { addClass : function(element, className) {
return this.setClass(element, className, [], doneCallback); return this.setClass(element, className, []);
}, },
/** /**
@@ -887,16 +927,15 @@ angular.module('ngAnimate', ['ng'])
* | 6. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation super ng-animate super-remove" | * | 6. $animate scans the element styles to get the CSS transition/animation duration and delay | class="my-animation super ng-animate super-remove" |
* | 7. $animate waits for the animation to complete (via events and timeout) | 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" | * | 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" | * | 9. The returned promise is resolved. | class="my-animation" |
* *
* *
* @param {DOMElement} element the element that will be animated * @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 {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 * @return {Promise} the animation callback promise
* @return {function} the animation cancellation function
*/ */
removeClass : function(element, className, doneCallback) { removeClass : function(element, className) {
return this.setClass(element, [], className, doneCallback); return this.setClass(element, [], className);
}, },
/** /**
@@ -916,68 +955,70 @@ angular.module('ngAnimate', ['ng'])
* | 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” | * | 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" | * | 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" | * | 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" | * | 8. The animation ends and all generated CSS classes are removed from the element | class="my-animation on" |
* | 9. The doneCallback() callback is fired (if provided) | class="my-animation" | * | 9. The returned promise is resolved. | class="my-animation on" |
* *
* @param {DOMElement} element the element which will have its CSS classes changed * @param {DOMElement} element the element which will have its CSS classes changed
* removed from it * removed from it
* @param {string} add the CSS classes which will be added to the element * @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 * @param {string} remove the CSS class which will be removed from the element
* @param {function=} done the callback function (if provided) that will be fired after the
* CSS classes have been set on the element * CSS classes have been set on the element
* @return {function} the animation cancellation function * @return {Promise} the animation callback promise
*/ */
setClass : function(element, add, remove, doneCallback) { setClass : function(element, add, remove) {
var STORAGE_KEY = '$$animateClasses'; var STORAGE_KEY = '$$animateClasses';
element = angular.element(element); element = angular.element(element);
element = stripCommentsFromElement(element); element = stripCommentsFromElement(element);
if (classBasedAnimationsBlocked(element)) { if (classBasedAnimationsBlocked(element)) {
return $delegate.setClass(element, add, remove, doneCallback); return $delegate.setClass(element, add, remove);
} }
add = isArray(add) ? add : add.split(' '); add = isArray(add) ? add : add.split(' ');
remove = isArray(remove) ? remove : remove.split(' '); remove = isArray(remove) ? remove : remove.split(' ');
doneCallback = doneCallback || noop;
var cache = element.data(STORAGE_KEY); var cache = element.data(STORAGE_KEY);
if (cache) { if (cache) {
cache.callbacks.push(doneCallback);
cache.add = cache.add.concat(add); cache.add = cache.add.concat(add);
cache.remove = cache.remove.concat(remove); cache.remove = cache.remove.concat(remove);
//the digest cycle will combine all the animations into one function //the digest cycle will combine all the animations into one function
return; return cache.promise;
} else { } else {
element.data(STORAGE_KEY, cache = { element.data(STORAGE_KEY, cache = {
callbacks : [doneCallback],
add : add, add : add,
remove : remove remove : remove
}); });
} }
return runAnimationPostDigest(function() { return cache.promise = runAnimationPostDigest(function(done) {
var cache = element.data(STORAGE_KEY); var cache = element.data(STORAGE_KEY);
var callbacks = cache.callbacks;
element.removeData(STORAGE_KEY); element.removeData(STORAGE_KEY);
var state = element.data(NG_ANIMATE_STATE) || {}; var state = element.data(NG_ANIMATE_STATE) || {};
var classes = resolveElementClasses(element, cache, state.active); var classes = resolveElementClasses(element, cache, state.active);
return !classes return !classes
? $$asyncCallback(onComplete) ? done()
: performAnimation('setClass', classes, element, null, null, function() { : performAnimation('setClass', classes, element, null, null, function() {
$delegate.setClass(element, classes[0], classes[1]); $delegate.setClass(element, classes[0], classes[1]);
}, onComplete); }, done);
function onComplete() {
forEach(callbacks, function(fn) {
fn();
});
}
}); });
}, },
/**
* @ngdoc method
* @name $animate#cancel
* @kind function
*
* @param {Promise} animationPromise The animation promise that is returned when an animation is started.
*
* @description
* Cancels the provided animation.
*/
cancel : function(promise) {
promise.$$cancelFn();
},
/** /**
* @ngdoc method * @ngdoc method
* @name $animate#enabled * @name $animate#enabled
@@ -1183,11 +1224,7 @@ angular.module('ngAnimate', ['ng'])
function fireDoneCallbackAsync() { function fireDoneCallbackAsync() {
fireDOMCallback('close'); fireDOMCallback('close');
if (doneCallback) { doneCallback();
$$asyncCallback(function() {
doneCallback();
});
}
} }
//it is less complicated to use a flag than managing and canceling //it is less complicated to use a flag than managing and canceling

14
src/ngMock/angular-mocks.js vendored
View File

@@ -767,14 +767,22 @@ angular.mock.animate = angular.module('ngAnimateMock', ['ng'])
}; };
}); });
$provide.decorator('$animate', ['$delegate', '$$asyncCallback', $provide.decorator('$animate', ['$delegate', '$$asyncCallback', '$timeout', '$browser',
function($delegate, $$asyncCallback) { function($delegate, $$asyncCallback, $timeout, $browser) {
var animate = { var animate = {
queue : [], queue : [],
cancel : $delegate.cancel,
enabled : $delegate.enabled, enabled : $delegate.enabled,
triggerCallbacks : function() { triggerCallbackEvents : function() {
$$asyncCallback.flush(); $$asyncCallback.flush();
}, },
triggerCallbackPromise : function() {
$timeout.flush(0);
},
triggerCallbacks : function() {
this.triggerCallbackEvents();
this.triggerCallbackPromise();
},
triggerReflow : function() { triggerReflow : function() {
angular.forEach(reflowQueue, function(fn) { angular.forEach(reflowQueue, function(fn) {
fn(); fn();

4
src/ngRoute/directive/ngView.js
View File

@@ -206,7 +206,7 @@ function ngViewFactory( $route, $anchorScroll, $animate) {
currentScope = null; currentScope = null;
} }
if(currentElement) { if(currentElement) {
$animate.leave(currentElement, function() { $animate.leave(currentElement).then(function() {
previousElement = null; previousElement = null;
}); });
previousElement = currentElement; previousElement = currentElement;
@@ -229,7 +229,7 @@ function ngViewFactory( $route, $anchorScroll, $animate) {
// function is called before linking the content, which would apply child // function is called before linking the content, which would apply child
// directives to non existing elements. // directives to non existing elements.
var clone = $transclude(newScope, function(clone) { var clone = $transclude(newScope, function(clone) {
$animate.enter(clone, null, currentElement || $element, function onNgViewEnter () { $animate.enter(clone, null, currentElement || $element).then(function onNgViewEnter () {
if (angular.isDefined(autoScrollExp) if (angular.isDefined(autoScrollExp)
&& (!autoScrollExp || scope.$eval(autoScrollExp))) { && (!autoScrollExp || scope.$eval(autoScrollExp))) {
$anchorScroll(); $anchorScroll();

1
test/.jshintrc
View File

@@ -51,6 +51,7 @@
"isBoolean": false, "isBoolean": false,
"trim": false, "trim": false,
"isElement": false, "isElement": false,
"isPromiseLike": false,
"makeMap": false, "makeMap": false,
"map": false, "map": false,
"size": false, "size": false,

5
test/helpers/matchers.js
View File

@@ -50,6 +50,11 @@ beforeEach(function() {
toBePristine: cssMatcher('ng-pristine', 'ng-dirty'), toBePristine: cssMatcher('ng-pristine', 'ng-dirty'),
toBeUntouched: cssMatcher('ng-untouched', 'ng-touched'), toBeUntouched: cssMatcher('ng-untouched', 'ng-touched'),
toBeTouched: cssMatcher('ng-touched', 'ng-untouched'), toBeTouched: cssMatcher('ng-touched', 'ng-untouched'),
toBeAPromise: function() {
this.message = valueFn(
"Expected object " + (this.isNot ? "not ": "") + "to be a promise");
return isPromiseLike(this.actual);
},
toBeShown: function() { toBeShown: function() {
this.message = valueFn( this.message = valueFn(
"Expected element " + (this.isNot ? "": "not ") + "to have 'ng-hide' class"); "Expected element " + (this.isNot ? "": "not ") + "to have 'ng-hide' class");

14
test/ng/animateSpec.js
View File

@@ -57,18 +57,18 @@ describe("$animate", function() {
expect(element).toBeHidden(); expect(element).toBeHidden();
})); }));
it("should run each method and return a noop function", inject(function($animate, $document) { it("should run each method and return a promise", inject(function($animate, $document) {
var element = jqLite('<div></div>'); var element = jqLite('<div></div>');
var move = jqLite('<div></div>'); var move = jqLite('<div></div>');
var parent = jqLite($document[0].body); var parent = jqLite($document[0].body);
parent.append(move); parent.append(move);
expect($animate.enter(element, parent)).toBe(noop); expect($animate.enter(element, parent)).toBeAPromise();
expect($animate.move(element, move)).toBe(noop); expect($animate.move(element, move)).toBeAPromise();
expect($animate.addClass(element, 'on')).toBe(noop); expect($animate.addClass(element, 'on')).toBeAPromise();
expect($animate.addClass(element, 'off')).toBe(noop); expect($animate.removeClass(element, 'off')).toBeAPromise();
expect($animate.setClass(element, 'on', 'off')).toBe(noop); expect($animate.setClass(element, 'on', 'off')).toBeAPromise();
expect($animate.leave(element)).toBe(noop); expect($animate.leave(element)).toBeAPromise();
})); }));
it("should add and remove classes on SVG elements", inject(function($animate) { it("should add and remove classes on SVG elements", inject(function($animate) {

2
test/ng/directive/ngClassSpec.js
View File

@@ -441,7 +441,7 @@ describe('ngClass animations', function() {
$compile(element)($rootScope); $compile(element)($rootScope);
var enterComplete = false; var enterComplete = false;
$animate.enter(element, $rootElement, null, function() { $animate.enter(element, $rootElement, null).then(function() {
enterComplete = true; enterComplete = true;
}); });

14
test/ng/directive/ngIfSpec.js
View File

@@ -315,14 +315,12 @@ describe('ngIf animations', function () {
it('should destroy the previous leave animation if a new one takes place', function() { it('should destroy the previous leave animation if a new one takes place', function() {
module(function($provide) { module(function($provide) {
$provide.value('$animate', { $provide.decorator('$animate', function($delegate, $$q) {
enabled : function() { return true; }, var emptyPromise = $$q.defer().promise;
leave : function() { $delegate.leave = function() {
//DOM operation left blank return emptyPromise;
}, };
enter : function(element, parent) { return $delegate;
parent.append(element);
}
}); });
}); });
inject(function ($compile, $rootScope, $animate) { inject(function ($compile, $rootScope, $animate) {

14
test/ng/directive/ngIncludeSpec.js
View File

@@ -693,14 +693,12 @@ describe('ngInclude animations', function() {
it('should destroy the previous leave animation if a new one takes place', function() { it('should destroy the previous leave animation if a new one takes place', function() {
module(function($provide) { module(function($provide) {
$provide.value('$animate', { $provide.decorator('$animate', function($delegate, $$q) {
enabled : function() { return true; }, var emptyPromise = $$q.defer().promise;
leave : function() { $delegate.leave = function() {
//DOM operation left blank return emptyPromise;
}, };
enter : function(element, parent, after) { return $delegate;
angular.element(after).after(element);
}
}); });
}); });
inject(function ($compile, $rootScope, $animate, $templateCache) { inject(function ($compile, $rootScope, $animate, $templateCache) {

14
test/ng/directive/ngSwitchSpec.js
View File

@@ -397,14 +397,12 @@ describe('ngSwitch animations', function() {
it('should destroy the previous leave animation if a new one takes place', function() { it('should destroy the previous leave animation if a new one takes place', function() {
module(function($provide) { module(function($provide) {
$provide.value('$animate', { $provide.decorator('$animate', function($delegate, $$q) {
enabled : function() { return true; }, var emptyPromise = $$q.defer().promise;
leave : function() { $delegate.leave = function() {
//DOM operation left blank return emptyPromise;
}, };
enter : function(element, parent, after) { return $delegate;
angular.element(after).after(element);
}
}); });
}); });
inject(function ($compile, $rootScope, $animate, $templateCache) { inject(function ($compile, $rootScope, $animate, $templateCache) {

214
test/ngAnimate/animateSpec.js
View File

@@ -566,7 +566,7 @@ describe("ngAnimate", function() {
expect(child.attr('class')).toContain('ng-enter'); expect(child.attr('class')).toContain('ng-enter');
expect(child.attr('class')).toContain('ng-enter-active'); expect(child.attr('class')).toContain('ng-enter-active');
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 }); browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
//move //move
element.append(after); element.append(after);
@@ -577,7 +577,7 @@ describe("ngAnimate", function() {
expect(child.attr('class')).toContain('ng-move'); expect(child.attr('class')).toContain('ng-move');
expect(child.attr('class')).toContain('ng-move-active'); expect(child.attr('class')).toContain('ng-move-active');
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 }); browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
//hide //hide
$animate.addClass(child, 'ng-hide'); $animate.addClass(child, 'ng-hide');
@@ -631,72 +631,72 @@ describe("ngAnimate", function() {
}); });
inject(function($animate, $sniffer, $rootScope, $timeout) { inject(function($animate, $sniffer, $rootScope, $timeout) {
var fn; var promise;
$animate.enabled(true); $animate.enabled(true);
$rootScope.$digest(); $rootScope.$digest();
element[0].removeChild(child[0]); element[0].removeChild(child[0]);
child.addClass('track-me'); child.addClass('track-me');
//enter //enter
fn = $animate.enter(child, element); promise = $animate.enter(child, element);
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
expect(captures.enter).toBeUndefined(); expect(captures.enter).toBeUndefined();
fn(); $animate.cancel(promise);
expect(captures.enter).toBeTruthy(); expect(captures.enter).toBeTruthy();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
//move //move
element.append(after); element.append(after);
fn = $animate.move(child, element, after); promise = $animate.move(child, element, after);
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
expect(captures.move).toBeUndefined(); expect(captures.move).toBeUndefined();
fn(); $animate.cancel(promise);
expect(captures.move).toBeTruthy(); expect(captures.move).toBeTruthy();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
//addClass //addClass
fn = $animate.addClass(child, 'ng-hide'); promise = $animate.addClass(child, 'ng-hide');
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
expect(captures.addClass).toBeUndefined(); expect(captures.addClass).toBeUndefined();
fn(); $animate.cancel(promise);
expect(captures.addClass).toBeTruthy(); expect(captures.addClass).toBeTruthy();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
//removeClass //removeClass
fn = $animate.removeClass(child, 'ng-hide'); promise = $animate.removeClass(child, 'ng-hide');
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
expect(captures.removeClass).toBeUndefined(); expect(captures.removeClass).toBeUndefined();
fn(); $animate.cancel(promise);
expect(captures.removeClass).toBeTruthy(); expect(captures.removeClass).toBeTruthy();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
//setClass //setClass
child.addClass('red'); child.addClass('red');
fn = $animate.setClass(child, 'blue', 'red'); promise = $animate.setClass(child, 'blue', 'red');
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
expect(captures.setClass).toBeUndefined(); expect(captures.setClass).toBeUndefined();
fn(); $animate.cancel(promise);
expect(captures.setClass).toBeTruthy(); expect(captures.setClass).toBeTruthy();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
//leave //leave
fn = $animate.leave(child); promise = $animate.leave(child);
$rootScope.$digest(); $rootScope.$digest();
expect(captures.leave).toBeUndefined(); expect(captures.leave).toBeUndefined();
fn(); $animate.cancel(promise);
expect(captures.leave).toBeTruthy(); expect(captures.leave).toBeTruthy();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
}); });
}); });
@@ -844,7 +844,7 @@ describe("ngAnimate", function() {
expect(element).toHaveClass('ng-animate'); expect(element).toHaveClass('ng-animate');
removeClassDone(); removeClassDone();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(element).not.toHaveClass('ng-animate'); expect(element).not.toHaveClass('ng-animate');
}); });
@@ -854,7 +854,7 @@ describe("ngAnimate", function() {
inject(function($animate, $rootScope, $sniffer, $timeout) { inject(function($animate, $rootScope, $sniffer, $timeout) {
var completed = false; var completed = false;
$animate.enter(child, element, null, function() { $animate.enter(child, element, null).then(function() {
completed = true; completed = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -870,7 +870,7 @@ describe("ngAnimate", function() {
$animate.triggerReflow(); $animate.triggerReflow();
browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 }); browserTrigger(child,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
} }
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(completed).toBe(true); expect(completed).toBe(true);
})); }));
@@ -1945,7 +1945,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('ng-enter')).toBe(true); expect(element.hasClass('ng-enter')).toBe(true);
expect(element.hasClass('ng-enter-active')).toBe(true); expect(element.hasClass('ng-enter-active')).toBe(true);
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 22000, elapsedTime: 22 }); browserTrigger(element,'transitionend', { timeStamp: Date.now() + 22000, elapsedTime: 22 });
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
} }
expect(element.hasClass('abc')).toBe(true); expect(element.hasClass('abc')).toBe(true);
@@ -1959,7 +1959,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('ng-enter')).toBe(true); expect(element.hasClass('ng-enter')).toBe(true);
expect(element.hasClass('ng-enter-active')).toBe(true); expect(element.hasClass('ng-enter-active')).toBe(true);
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 11000, elapsedTime: 11 }); browserTrigger(element,'transitionend', { timeStamp: Date.now() + 11000, elapsedTime: 11 });
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
} }
expect(element.hasClass('xyz')).toBe(true); expect(element.hasClass('xyz')).toBe(true);
})); }));
@@ -2029,12 +2029,12 @@ describe("ngAnimate", function() {
body.append($rootElement); body.append($rootElement);
var flag = false; var flag = false;
$animate.enter(element, parent, null, function() { $animate.enter(element, parent, null).then(function() {
flag = true; flag = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(flag).toBe(true); expect(flag).toBe(true);
})); }));
@@ -2049,12 +2049,12 @@ describe("ngAnimate", function() {
body.append($rootElement); body.append($rootElement);
var flag = false; var flag = false;
$animate.leave(element, function() { $animate.leave(element).then(function() {
flag = true; flag = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(flag).toBe(true); expect(flag).toBe(true);
})); }));
@@ -2070,12 +2070,12 @@ describe("ngAnimate", function() {
body.append($rootElement); body.append($rootElement);
var flag = false; var flag = false;
$animate.move(element, parent, parent2, function() { $animate.move(element, parent, parent2).then(function() {
flag = true; flag = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(flag).toBe(true); expect(flag).toBe(true);
expect(element.parent().id).toBe(parent2.id); expect(element.parent().id).toBe(parent2.id);
@@ -2093,19 +2093,19 @@ describe("ngAnimate", function() {
body.append($rootElement); body.append($rootElement);
var signature = ''; var signature = '';
$animate.addClass(element, 'on', function() { $animate.addClass(element, 'on').then(function() {
signature += 'A'; signature += 'A';
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
$animate.removeClass(element, 'on', function() { $animate.removeClass(element, 'on').then(function() {
signature += 'B'; signature += 'B';
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(signature).toBe('AB'); expect(signature).toBe('AB');
})); }));
@@ -2122,13 +2122,13 @@ describe("ngAnimate", function() {
expect(element.hasClass('off')).toBe(true); expect(element.hasClass('off')).toBe(true);
var signature = ''; var signature = '';
$animate.setClass(element, 'on', 'off', function() { $animate.setClass(element, 'on', 'off').then(function() {
signature += 'Z'; signature += 'Z';
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(signature).toBe('Z'); expect(signature).toBe('Z');
expect(element.hasClass('on')).toBe(true); expect(element.hasClass('on')).toBe(true);
@@ -2162,27 +2162,29 @@ describe("ngAnimate", function() {
steps.push(['close', data.className, data.event]); steps.push(['close', data.className, data.event]);
}); });
$animate.addClass(element, 'klass', function() { $animate.addClass(element, 'klass').then(function() {
steps.push(['done', 'klass', 'addClass']); steps.push(['done', 'klass', 'addClass']);
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackEvents();
expect(steps.pop()).toEqual(['before', 'klass', 'addClass']); expect(steps.pop()).toEqual(['before', 'klass', 'addClass']);
$animate.triggerReflow(); $animate.triggerReflow();
$animate.triggerCallbacks(); $animate.triggerCallbackEvents();
expect(steps.pop()).toEqual(['after', 'klass', 'addClass']); expect(steps.pop()).toEqual(['after', 'klass', 'addClass']);
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 }); browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
$animate.triggerCallbacks(); $animate.triggerCallbackEvents();
expect(steps.shift()).toEqual(['close', 'klass', 'addClass']); expect(steps.shift()).toEqual(['close', 'klass', 'addClass']);
$animate.triggerCallbackPromise();
expect(steps.shift()).toEqual(['done', 'klass', 'addClass']); expect(steps.shift()).toEqual(['done', 'klass', 'addClass']);
})); }));
@@ -2208,7 +2210,7 @@ describe("ngAnimate", function() {
$animate.enter(element, parent); $animate.enter(element, parent);
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackEvents();
expect(steps.shift()).toEqual(['before', 'ng-enter', 'enter']); expect(steps.shift()).toEqual(['before', 'ng-enter', 'enter']);
expect(steps.shift()).toEqual(['after', 'ng-enter', 'enter']); expect(steps.shift()).toEqual(['after', 'ng-enter', 'enter']);
@@ -2238,12 +2240,12 @@ describe("ngAnimate", function() {
body.append($rootElement); body.append($rootElement);
var flag = false; var flag = false;
$animate.removeClass(element, 'ng-hide', function() { $animate.removeClass(element, 'ng-hide').then(function() {
flag = true; flag = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(flag).toBe(true); expect(flag).toBe(true);
})); }));
@@ -2262,7 +2264,7 @@ describe("ngAnimate", function() {
var element = parent.find('span'); var element = parent.find('span');
var flag = false; var flag = false;
$animate.addClass(element, 'ng-hide', function() { $animate.addClass(element, 'ng-hide').then(function() {
flag = true; flag = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2271,7 +2273,7 @@ describe("ngAnimate", function() {
$animate.triggerReflow(); $animate.triggerReflow();
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 }); browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
} }
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(flag).toBe(true); expect(flag).toBe(true);
})); }));
@@ -2286,12 +2288,12 @@ describe("ngAnimate", function() {
element.addClass('custom'); element.addClass('custom');
var flag = false; var flag = false;
$animate.removeClass(element, 'ng-hide', function() { $animate.removeClass(element, 'ng-hide').then(function() {
flag = true; flag = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(flag).toBe(true); expect(flag).toBe(true);
})); }));
@@ -2310,11 +2312,11 @@ describe("ngAnimate", function() {
var element = parent.find('span'); var element = parent.find('span');
var signature = ''; var signature = '';
$animate.removeClass(element, 'ng-hide', function() { $animate.removeClass(element, 'ng-hide').then(function() {
signature += 'A'; signature += 'A';
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.addClass(element, 'ng-hide', function() { $animate.addClass(element, 'ng-hide').then(function() {
signature += 'B'; signature += 'B';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2324,7 +2326,7 @@ describe("ngAnimate", function() {
$animate.triggerReflow(); $animate.triggerReflow();
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 9 }); browserTrigger(element,'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 9 });
} }
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(signature).toBe('AB'); expect(signature).toBe('AB');
})); }));
}); });
@@ -2462,7 +2464,7 @@ describe("ngAnimate", function() {
var signature = ''; var signature = '';
$animate.addClass(element,'klass', function() { $animate.addClass(element,'klass').then(function() {
signature += 'A'; signature += 'A';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2470,13 +2472,13 @@ describe("ngAnimate", function() {
expect(element.hasClass('klass')).toBe(true); expect(element.hasClass('klass')).toBe(true);
$animate.removeClass(element,'klass', function() { $animate.removeClass(element,'klass').then(function() {
signature += 'B'; signature += 'B';
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(element.hasClass('klass')).toBe(false); expect(element.hasClass('klass')).toBe(false);
expect(signature).toBe('AB'); expect(signature).toBe('AB');
})); }));
@@ -2497,7 +2499,7 @@ describe("ngAnimate", function() {
var signature = ''; var signature = '';
$animate.addClass(element,'klass', function() { $animate.addClass(element,'klass').then(function() {
signature += '1'; signature += '1';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2510,10 +2512,10 @@ describe("ngAnimate", function() {
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 3000, elapsedTime: 3 }); browserTrigger(element,'transitionend', { timeStamp: Date.now() + 3000, elapsedTime: 3 });
} }
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
//this cancels out the older animation //this cancels out the older animation
$animate.removeClass(element,'klass', function() { $animate.removeClass(element,'klass').then(function() {
signature += '2'; signature += '2';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2529,7 +2531,7 @@ describe("ngAnimate", function() {
browserTrigger(element,'transitionend', { timeStamp: Date.now() + 3000, elapsedTime: 3 }); browserTrigger(element,'transitionend', { timeStamp: Date.now() + 3000, elapsedTime: 3 });
} }
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(element.hasClass('klass')).toBe(false); expect(element.hasClass('klass')).toBe(false);
expect(signature).toBe('12'); expect(signature).toBe('12');
@@ -2546,7 +2548,7 @@ describe("ngAnimate", function() {
var signature = ''; var signature = '';
$animate.addClass(element,'klassy', function() { $animate.addClass(element,'klassy').then(function() {
signature += 'X'; signature += 'X';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2556,7 +2558,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('klassy')).toBe(true); expect(element.hasClass('klassy')).toBe(true);
$animate.removeClass(element,'klassy', function() { $animate.removeClass(element,'klassy').then(function() {
signature += 'Y'; signature += 'Y';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2566,7 +2568,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('klassy')).toBe(false); expect(element.hasClass('klassy')).toBe(false);
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(signature).toBe('XY'); expect(signature).toBe('XY');
})); }));
@@ -2580,7 +2582,7 @@ describe("ngAnimate", function() {
var signature = ''; var signature = '';
$animate.addClass(element[0],'klassy', function() { $animate.addClass(element[0],'klassy').then(function() {
signature += 'X'; signature += 'X';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2590,7 +2592,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('klassy')).toBe(true); expect(element.hasClass('klassy')).toBe(true);
$animate.removeClass(element[0],'klassy', function() { $animate.removeClass(element[0],'klassy').then(function() {
signature += 'Y'; signature += 'Y';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2600,7 +2602,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('klassy')).toBe(false); expect(element.hasClass('klassy')).toBe(false);
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(signature).toBe('XY'); expect(signature).toBe('XY');
})); }));
@@ -2619,7 +2621,7 @@ describe("ngAnimate", function() {
var signature = ''; var signature = '';
$animate.addClass(element,'klass', function() { $animate.addClass(element,'klass').then(function() {
signature += 'd'; signature += 'd';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2633,10 +2635,10 @@ describe("ngAnimate", function() {
expect(element.hasClass('klass-add-active')).toBe(false); expect(element.hasClass('klass-add-active')).toBe(false);
} }
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(element.hasClass('klass')).toBe(true); expect(element.hasClass('klass')).toBe(true);
$animate.removeClass(element,'klass', function() { $animate.removeClass(element,'klass').then(function() {
signature += 'b'; signature += 'b';
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2650,7 +2652,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('klass-remove-active')).toBe(false); expect(element.hasClass('klass-remove-active')).toBe(false);
} }
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(element.hasClass('klass')).toBe(false); expect(element.hasClass('klass')).toBe(false);
expect(signature).toBe('db'); expect(signature).toBe('db');
@@ -2671,7 +2673,7 @@ describe("ngAnimate", function() {
var element = jqLite(parent.find('span')); var element = jqLite(parent.find('span'));
var flag = false; var flag = false;
$animate.addClass(element,'one two', function() { $animate.addClass(element,'one two').then(function() {
flag = true; flag = true;
}); });
@@ -2692,7 +2694,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('two-add-active')).toBe(false); expect(element.hasClass('two-add-active')).toBe(false);
} }
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(element.hasClass('one')).toBe(true); expect(element.hasClass('one')).toBe(true);
expect(element.hasClass('two')).toBe(true); expect(element.hasClass('two')).toBe(true);
@@ -2719,7 +2721,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('two')).toBe(true); expect(element.hasClass('two')).toBe(true);
var flag = false; var flag = false;
$animate.removeClass(element,'one two', function() { $animate.removeClass(element,'one two').then(function() {
flag = true; flag = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -2739,7 +2741,7 @@ describe("ngAnimate", function() {
expect(element.hasClass('two-remove-active')).toBe(false); expect(element.hasClass('two-remove-active')).toBe(false);
} }
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(element.hasClass('one')).toBe(false); expect(element.hasClass('one')).toBe(false);
expect(element.hasClass('two')).toBe(false); expect(element.hasClass('two')).toBe(false);
@@ -2901,7 +2903,7 @@ describe("ngAnimate", function() {
child.addClass('usurper'); child.addClass('usurper');
$animate.leave(child); $animate.leave(child);
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(child.hasClass('ng-enter')).toBe(false); expect(child.hasClass('ng-enter')).toBe(false);
expect(child.hasClass('ng-enter-active')).toBe(false); expect(child.hasClass('ng-enter-active')).toBe(false);
@@ -2955,10 +2957,10 @@ describe("ngAnimate", function() {
// if($sniffer.transitions) { // if($sniffer.transitions) {
// expect(element.hasClass('on')).toBe(false); // expect(element.hasClass('on')).toBe(false);
// expect(element.hasClass('on-add')).toBe(true); // expect(element.hasClass('on-add')).toBe(true);
// $animate.triggerCallbacks(); // $animate.triggerCallbackPromise();
// } // }
// //
// $animate.triggerCallbacks(); // $animate.triggerCallbackPromise();
// //
// expect(element.hasClass('on')).toBe(true); // expect(element.hasClass('on')).toBe(true);
// expect(element.hasClass('on-add')).toBe(false); // expect(element.hasClass('on-add')).toBe(false);
@@ -2971,7 +2973,7 @@ describe("ngAnimate", function() {
// $timeout.flush(10000); // $timeout.flush(10000);
// } // }
// //
// $animate.triggerCallbacks(); // $animate.triggerCallbackPromise();
// expect(element.hasClass('on')).toBe(false); // expect(element.hasClass('on')).toBe(false);
// expect(element.hasClass('on-remove')).toBe(false); // expect(element.hasClass('on-remove')).toBe(false);
// expect(element.hasClass('on-remove-active')).toBe(false); // expect(element.hasClass('on-remove-active')).toBe(false);
@@ -3014,11 +3016,11 @@ describe("ngAnimate", function() {
// //
// if($sniffer.transitions) { // if($sniffer.transitions) {
// expect(element).toBeShown(); //still showing // expect(element).toBeShown(); //still showing
// $animate.triggerCallbacks(); // $animate.triggerCallbackPromise();
// expect(element).toBeShown(); // expect(element).toBeShown();
// $timeout.flush(5555); // $timeout.flush(5555);
// } // }
// $animate.triggerCallbacks(); // $animate.triggerCallbackPromise();
// expect(element).toBeHidden(); // expect(element).toBeHidden();
// //
// expect(element.hasClass('showing')).toBe(false); // expect(element.hasClass('showing')).toBe(false);
@@ -3027,11 +3029,11 @@ describe("ngAnimate", function() {
// //
// if($sniffer.transitions) { // if($sniffer.transitions) {
// expect(element).toBeHidden(); // expect(element).toBeHidden();
// $animate.triggerCallbacks(); // $animate.triggerCallbackPromise();
// expect(element).toBeHidden(); // expect(element).toBeHidden();
// $timeout.flush(5580); // $timeout.flush(5580);
// } // }
// $animate.triggerCallbacks(); // $animate.triggerCallbackPromise();
// expect(element).toBeShown(); // expect(element).toBeShown();
// //
// expect(element.hasClass('showing')).toBe(true); // expect(element.hasClass('showing')).toBe(true);
@@ -3311,20 +3313,20 @@ describe("ngAnimate", function() {
angular.element($document[0].body).append($rootElement); angular.element($document[0].body).append($rootElement);
var log = ''; var log = '';
$animate.addClass(element, 'one', function() { $animate.addClass(element, 'one').then(function() {
log += 'A'; log += 'A';
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.addClass(element, 'one', function() { $animate.addClass(element, 'one').then(function() {
log += 'B'; log += 'B';
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
$animate.triggerReflow(); $animate.triggerReflow();
continueAnimation(); continueAnimation();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(log).toBe('BA'); expect(log).toBe('BA');
}); });
}); });
@@ -3349,13 +3351,13 @@ describe("ngAnimate", function() {
count++; count++;
}; };
$animate.addClass(element, 'on', callback); $animate.addClass(element, 'on').then(callback);
$animate.addClass(element, 'on', callback); $animate.addClass(element, 'on').then(callback);
$animate.removeClass(element, 'on', callback); $animate.removeClass(element, 'on').then(callback);
$animate.removeClass(element, 'on', callback); $animate.removeClass(element, 'on').then(callback);
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(spy).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
expect(count).toBe(4); expect(count).toBe(4);
@@ -4065,7 +4067,7 @@ describe("ngAnimate", function() {
forEach(element.children(), function(kid) { forEach(element.children(), function(kid) {
browserTrigger(kid, 'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 }); browserTrigger(kid, 'transitionend', { timeStamp: Date.now() + 1000, elapsedTime: 1 });
}); });
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
$rootScope.items = []; $rootScope.items = [];
$rootScope.$digest(); $rootScope.$digest();
@@ -4101,12 +4103,12 @@ describe("ngAnimate", function() {
jqLite($document[0].body).append($rootElement); jqLite($document[0].body).append($rootElement);
var enterDone = false; var enterDone = false;
$animate.enter(element, $rootElement, null, function() { $animate.enter(element, $rootElement).then(function() {
enterDone = true; enterDone = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(captures['enter']).toBeUndefined(); expect(captures['enter']).toBeUndefined();
expect(enterDone).toBe(true); expect(enterDone).toBe(true);
@@ -4114,12 +4116,12 @@ describe("ngAnimate", function() {
element.addClass('prefixed-animation'); element.addClass('prefixed-animation');
var leaveDone = false; var leaveDone = false;
$animate.leave(element, function() { $animate.leave(element).then(function() {
leaveDone = true; leaveDone = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(captures['leave']).toBe(true); expect(captures['leave']).toBe(true);
expect(leaveDone).toBe(true); expect(leaveDone).toBe(true);
@@ -4157,14 +4159,14 @@ describe("ngAnimate", function() {
var element = upperElement.find('span'); var element = upperElement.find('span');
var leaveDone = false; var leaveDone = false;
$animate.leave(element, function() { $animate.leave(element).then(function() {
leaveDone = true; leaveDone = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerCallbacks(); $animate.triggerCallbacks();
expect(captures['leave']).toBe(true); expect(captures.leave).toBe(true);
expect(leaveDone).toBe(true); expect(leaveDone).toBe(true);
}); });
}); });
@@ -4187,7 +4189,7 @@ describe("ngAnimate", function() {
jqLite($document[0].body).append($rootElement); jqLite($document[0].body).append($rootElement);
var ready = false; var ready = false;
$animate.addClass(element, 'on', function() { $animate.addClass(element, 'on').then(function() {
ready = true; ready = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
@@ -4198,18 +4200,18 @@ describe("ngAnimate", function() {
browserTrigger(element, 'transitionend', { timeStamp: Date.now(), elapsedTime: 5 }); browserTrigger(element, 'transitionend', { timeStamp: Date.now(), elapsedTime: 5 });
$animate.triggerReflow(); $animate.triggerReflow();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(ready).toBe(true); expect(ready).toBe(true);
ready = false; ready = false;
$animate.removeClass(element, 'on', function() { $animate.removeClass(element, 'on').then(function() {
ready = true; ready = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
browserTrigger(element, 'transitionend', { timeStamp: Date.now(), elapsedTime: 1 }); browserTrigger(element, 'transitionend', { timeStamp: Date.now(), elapsedTime: 1 });
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(ready).toBe(true); expect(ready).toBe(true);
})); }));
@@ -4228,13 +4230,13 @@ describe("ngAnimate", function() {
jqLite($document[0].body).append($rootElement); jqLite($document[0].body).append($rootElement);
var ready = false; var ready = false;
$animate.removeClass(element, 'on', function() { $animate.removeClass(element, 'on').then(function() {
ready = true; ready = true;
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(ready).toBe(true); expect(ready).toBe(true);
})); }));
@@ -4253,22 +4255,22 @@ describe("ngAnimate", function() {
jqLite($document[0].body).append($rootElement); jqLite($document[0].body).append($rootElement);
var signature = ''; var signature = '';
$animate.removeClass(element, 'on', function() { $animate.removeClass(element, 'on').then(function() {
signature += 'A'; signature += 'A';
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.addClass(element, 'on', function() { $animate.addClass(element, 'on').then(function() {
signature += 'B'; signature += 'B';
}); });
$rootScope.$digest(); $rootScope.$digest();
$animate.triggerReflow(); $animate.triggerReflow();
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(signature).toBe('A'); expect(signature).toBe('A');
browserTrigger(element, 'transitionend', { timeStamp: Date.now(), elapsedTime: 2000 }); browserTrigger(element, 'transitionend', { timeStamp: Date.now(), elapsedTime: 2000 });
$animate.triggerCallbacks(); $animate.triggerCallbackPromise();
expect(signature).toBe('AB'); expect(signature).toBe('AB');
})); }));

14
test/ngRoute/directive/ngViewSpec.js
View File

@@ -846,14 +846,12 @@ describe('ngView animations', function() {
it('should destroy the previous leave animation if a new one takes place', function() { it('should destroy the previous leave animation if a new one takes place', function() {
module(function($provide) { module(function($provide) {
$provide.value('$animate', { $provide.decorator('$animate', function($delegate, $$q) {
enabled : function() { return true; }, var emptyPromise = $$q.defer().promise;
leave : function() { $delegate.leave = function() {
//DOM operation left blank return emptyPromise;
}, };
enter : function(element, parent, after) { return $delegate;
angular.element(after).after(element);
}
}); });
}); });
inject(function ($compile, $rootScope, $animate, $location) { inject(function ($compile, $rootScope, $animate, $location) {