This repository was archived by the owner on Apr 12, 2024. It is now read-only.
Concurrent class-based animations, Promises API for Animations & Fixes to Staggering Animations #8637
+837
−385
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
matsko
changed the title
…igest loop All class-based animation methods (addClass, removeClass and setClass) on $animate are now processed after the next digest occurs. This fix prevents any sequencing errors from occuring from excessive calls to $animate.addClass or $animate.remoteClass. BREAKING CHANGE All directive code that expects any addClass, removeClass or setClass animations to kick off immediately after being called must now be aware that the animation will only take place once the next digest has kicked off. Also note that successive calls to $animate.addClass, $animate.removeClass or $animate.setClass will be grouped together and will not cancel the former class-based animation (once the digest has passed).
The $animate service (both the service inside of ng and ngAnimate) now makes use of promises instead of callback functions. BREAKING CHANGE Any existing directive code that makes use of animation callbacks provided directly into any of the methods available $animate must now be converted to use promises instead. Also, the `cancel` function (which was the return value from each of the $animate methods) is now returned as a member function on the returned animation promise. ```js //before var cancelFn = $animate.enter(element, container, null, callbackFn); cancelFn(); //cancels the animation //after (without cancel) var promise = $animate.enter(element, container).then(callbackFn); //after (with cancellation method) var promise = $animate.enter(element, container); promise.then(callbackFn); promise.cancel(); //cancels the animation ```
matsko
changed the title
…mations When transition-delay and animation-delay were used to drive the staggering animation the result was unpredictable at times due to the browser not being able to register the generated delay styles in time. This caused a hard to track down bug that didn't have a solid solution when styles were being used. This fix ensures that stagger delays are handled by the $timeout service. Closes angular#7228 Closes angular#7547 Closes angular#8297 Closes angular#8547 BREAKING CHANGE If any stagger code consisted of having BOTH transition staggers and delay staggers together then that will not work the same way. Angular will no instead choose the highest stagger delay value and set the timeout to wait for that before applying the active CSS class.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Grouped Class-Based Animations
Now something like this works fine:
Promise Callbacks for Animations
The
doneCallbackfunction parameter is no more. Use a promise instead.$timeout-based Stagger Animations
This fix uses $timeout behind the scenes instead of
animation-delayanimationtransition-delay. It also adds another CSS class calledng-EVENT-pending. This new setup allows for 3rd-party CSS keyframe animations to work with Angular-defined stagger styles nicely.https://s3.amazonaws.com/angularjs-dev/class-based-fixes/animate.html
Closes
Closes #7228
Closes #7547
Closes #8297
Closes #8547