This repository has been archived by the owner on Apr 12, 2024. It is now read-only.
fix($animate): run CSS animations before JS animations to avoid style inheritance #6799
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
|
Matias is a machine. |
| @@ -721,6 +721,32 @@ describe("ngAnimate", function() { | |||
| }) | |||
| }); | |||
|
|
|||
| it("should always perform the CSS animation before the JS animation", function() { | |||
There was a problem hiding this comment.
can you add a reason in a comment?
something like:
// this order is important so that js animations can't change element style and confuse us
// when computing styles to figure out transition duration
There was a problem hiding this comment.
otherwise only you know why this test is here and even you might forget the reason in the future :)
There was a problem hiding this comment.
Fixed.
/* The CSS animation handler must always be rendered before the other JS animation
handlers. This is important since the CSS animation handler may place temporary
styling on the HTML element before the reflow commences which in turn may override
other transition or keyframe styles that any former JS animations may have placed
on the element: https://github.com/angular/angular.js/issues/6675 */
|
otherwise lgtm |
… inheritance If a JS animation is run before a CSS animation then the JS animation may end up writing style data to the element. If any transition or animation style data is written then it may end up being accidentally inherited into the CSS animation hanlder that ngAnimate uses. This may result in an unexpected outcome due to the tweaks and hacks that the CSS handler places on the element. If the CSS animation is run before the JS animation then, if there are no transitions on the style attribute nor within the global CSS on the page then nothing will happen and the JS animation can work as expected. Closes angular#6675
|
MERGED |
|
Landed as 2317af6 |
|
And as 0e5106e for 1.2.x |
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.
If a JS animation is run before a CSS animation then the JS animation may end up writing style
data to the element. If any transition or animation style data is written then it may end up
being accidentally inherited into the CSS animation hanlder that ngAnimate uses. This may result
in an unexpected outcome due to the tweaks and hacks that the CSS handler places on the element.
If the CSS animation is run before the JS animation then, if there are no transitions on the style
attribute nor within the global CSS on the page then nothing will happen and the JS animation can
work as expected.
Closes #6675