[csswg-drafts] [css-shared-element-transitions-1] Define "active animation" used to signal end of transition (#7785)

khushalsagar has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shared-element-transitions-1] Define "active animation" used to signal end of transition ==
Shared Element Transition creates an ephemeral tree of elements with snapshots from incoming and outgoing DOM state. We need to define the lifetime of this tree. Since the purpose of this tree is to permit animations on these elements, we rely on the existence of the animations to decide how long this tree lives.

For declarative animations (CSS transitions, CSS animations and Web Animations) which can be detected by the browser, the [spec] (https://drafts.csswg.org/css-shared-element-transitions-1/#issue-9b6c2555) talks about detecting when any of the generating elements have active animations. We need to define what active means here.

Each of the animation APIs above provide an event that the developer can use to detect if the animation was finished or cancelled:

* CSS Transition : [transitionend](https://drafts.csswg.org/css-transitions/#transitionend) and [transitioncancel](https://drafts.csswg.org/css-transitions/#transitioncancel).
* CSS Animation : [animationend](https://w3c.github.io/csswg-drafts/css-animations-1/#eventdef-globaleventhandlers-animationend) and [animationcancel](https://w3c.github.io/csswg-drafts/css-animations-1/#eventdef-globaleventhandlers-animationcancel).
* Web Animation : finish, cancel and remove events as defined [here](https://w3c.github.io/csswg-drafts/web-animations-1/#animation-playback-event-types).

We want to ensure that these events are fired before assuming that an element has no active animation. This allows the developer to chain animations by waiting for one to finish before triggering the next. The precise proposal is as follows:

* Immediately after the transition elements are generated a [ready promise](https://drafts.csswg.org/css-shared-element-transitions-1/#domtransition-ready-promise) is resolved to notify the developer that these elements can be targeted in script. Wait until this event is fired.
* Then check that none of the generated elements have an animation which is waiting to start, is currently running or is pending dispatch of finished or cancel events. Since checking if an element has an animation waiting to start requires a clean style the check may be deferred until the next rendering opportunity if the style is dirty. Similarly this check runs after dispatch of the finished/cancel animation events.
* Once there is a check when none of the elements have an animation in the state above, the transition is assumed to be finished and generated elements are removed.

I'm not sure if the above can be simplified by running the check at the end of every [update the rendering](https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering) loop. That loop might not be triggered after the animationend event (if there are no new updates to draw?). Ideas welcome on that.

Note: This doesn't cover script driven animations (like the ones that use rAF). We'll need a separate script API for that. This is targeted for the use-case where the developer is using declarative animations and the transition elements automatically go away once these animations are done. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7785 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 23 September 2022 19:15:12 UTC