New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(animations): ensure position
and display
styles are handled outside of keyframes/web-animations
#28911
Conversation
82c8e85
to
a75194a
Compare
a75194a
to
a0959a6
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, we some cleanup.
Please change all assurances of special
to nonAnimatable
as I think that makes the code more readable.
* will ignore them. This function is designed to detect those special cased styles and | ||
* return a container that will be executed at the start and end of the animation. | ||
* | ||
* @returns an instance of `SpecialCasedStyles` if any special styles are detected otherwise `null` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the docs.
} | ||
} | ||
|
||
const enum SpecialCasedStylesState { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this could use some docs.
return result; | ||
} | ||
|
||
function isSpecialStyle(prop: string) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
instead of special
could we use nonAnimatable
that would be more descriptive.
@@ -66,7 +67,8 @@ export class WebAnimationsDriver implements AnimationDriver { | |||
|
|||
keyframes = keyframes.map(styles => copyStyles(styles, false)); | |||
keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles); | |||
return new WebAnimationsPlayer(element, keyframes, playerOptions); | |||
const specialStyles = packageSpecialStyles(element, keyframes); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
packageNonAnimatableStyles
makes a lot more sense than special
…utside of keyframes/web-animations When web-animations and/or CSS keyframes are used for animations certain CSS style values (such as `display` and `position`) may be ignored by a keyframe-based animation. Angular should special-case these styles to ensure that they get applied as inline styles throughout the duration of the animation. Closes angular#24923 Closes angular#25635 Jira Issue: FW-1091 Jira Issue: FW-1092
a0959a6
to
de7432a
Compare
…ndled outside of keyframes/web-animations
…utside of keyframes/web-animations (#28911) When web-animations and/or CSS keyframes are used for animations certain CSS style values (such as `display` and `position`) may be ignored by a keyframe-based animation. Angular should special-case these styles to ensure that they get applied as inline styles throughout the duration of the animation. Closes #24923 Closes #25635 Jira Issue: FW-1091 Jira Issue: FW-1092 PR Close #28911
@scttcper this PR is changing angular to permit the use of |
setStyles(this._element, this._endStyles); | ||
this._endStyles = null; | ||
} | ||
this._state = SpecialCasedStylesState.Started; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@matsko Should line 79 be
this._state = SpecialCasedStylesState.Finished;
?
I think the order of the SpecialCasedStylesState
enum allowed this to still work. Please excuse me if this line was intentional for other purposes!
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
When web-animations and/or CSS keyframes are used for animations certain
CSS style values (such as
display
andposition
) may be ignored by akeyframe-based animation. Angular should special-case these styles to
ensure that they get applied as inline styles throughout the duration of
the animation.
Closes #24923
Closes #25635
Jira Issue: FW-1091
Jira Issue: FW-1092