This repository has been archived by the owner on Apr 12, 2024. It is now read-only.
fix($animate): make CSS blocking optional for class-based animations #6841
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
|
Hey Matias |
|
Dies it make sense to add docunentation for this change? |
|
I am currently working on that. |
|
It will be in the same commit. |
| var state = isRoot ? rootAnimateState : (parentElement.data(NG_ANIMATE_STATE) || {}); | ||
| var result = state.disabled || state.running | ||
| ? true | ||
| : state.last && !state.last.isClassBased; |
There was a problem hiding this comment.
can you indent this the way we indent all the other ternary operators in angular code base?
|
please add docs, otherwise looks good |
| * <h3>CSS Staggering Animations</h3> | ||
| * ### Structural transition animations | ||
| * | ||
| * Structural transitions (such as enter, leave and move) will always apply a `none 0s` transition |
There was a problem hiding this comment.
isn't it more common to say 0s none instead of none 0s?
$animate attempts places a `transition: none 0s` block on the element when the first CSS class is applied if a transition animation is underway. This works fine for structural animations (enter, leave and move), however, for class-based animations, this poses a big problem. As of this patch, instead of $animate placing the block, it is now the responsibility of the user to place `transition: 0s none` into their class-based transition setup CSS class. This way the animation will avoid all snapping and any will allow $animate to play nicely with class-based transitions that are defined outside of ngAnimate. Closes angular#6674 Closes angular#6739 BREAKING CHANGE: Any class-based animation code that makes use of transitions and uses the setup CSS classes (such as class-add and class-remove) must now provide a empty transition value to ensure that its styling is applied right away. In other words if your animation code is expecting any styling to be applied that is defined in the setup class then it will not be applied "instantly" default unless a `transition:0s none` value is present in the styling for that CSS class. This situation is only the case if a transition is already present on the base CSS class once the animation kicks off.
|
MERGED |
|
Landed as 1bebe36 |
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.
$animate attempts places a
transition: none 0sblock on the element whenthe first CSS class is applied if a transition animation is underway. This
works fine for structural animations (enter, leave and move), however, for
class-based animations, this poses a big problem. As of this patch, instead
of $animate placing the block, it is now the responsibility of the user to
place
transition: 0s noneinto their class-based transition setup CSS class.This way the animation will avoid all snapping and any will allow $animate to
play nicely with class-based transitions that are defined outside of ngAnimate.
Closes #6674
Closes #6739
BREAKING CHANGE: Any class-based animation code that makes use of transitions
and uses the setup CSS classes (such as class-add and class-remove) must now
provide a empty transition value to ensure that its styling is applied right
away. In other words if your animation code is expecting any styling to be
applied that is defined in the setup class then it will not be applied
"instantly" default unless a
transition:0s nonevalue is present in the stylingfor that CSS class. This situation is only the case if a transition is already
present on the base CSS class once the animation kicks off.