Open simevidas opened 2 years ago
I'm a bit concerned about the layering here. As I understand it, the proposal is that on firing an animationend
event, we would synthesize a callback that sets the style of the target element(s) using the specified properties.
That opens a few questions like:
The former would be a break from the existing behavior of CSS animations (where styles apply to the animations level of the cascade) and might produce some unexpected results: e.g. you drop the corresponding animation-name
declaration but the effects remain.
The latter would also produce an odd situation where the application of an animation could cause that same animation to no longer apply (since the target element would become display: none
meaning it can no longer run animation effects and its existing animations would be canceled).
animationend
event handlers prevent them by calling preventDefault()
? And what is the ordering?I guess the answer is "no"? That these should be something else that runs prior to actual event handlers, but after queueing said events?
I think there are a few odd situations that arise here but they're probably not too bad.
Most of all I think the problem is that CSS animations are resolved on the elements they animate and are canceled by the application of display: none
to that same element.
So long as that's the case, it seems to me like applying display: none
is best done by something orthogonal to the animations themselves.
For Web Animations, display: none
does not have the side effect of canceling the animation so we could investigate allowing display: none
there. I know we've tried in the past but hit implementation issues. I don't think they're insurmountable, however and should probably be revisited.
SVG/SMIL animation allows setting the display
property since, like Web Animations, the elements/objects that produce the animation are independent of the elements being animated.
If we need to have a declarative syntax for this that applies to CSS animations, then I think something like a pseudo class keyed on the animation name would at least address the first question since the styles would clearly be separate to the animation styles so it's obvious where they apply in the style cascade and obvious that their application is somewhat independent of the animation itself.
Spec: https://drafts.csswg.org/css-animations/#keyframes
Maybe it would be a good idea to add
start
andend
keyframe selectors that would represent theanimationstart
andanimationend
events. That would enable code like this:It seems that, currently, authors have to apply
display: none
via JavaScript.Related Twitter discussion