[csswg-drafts] [css-view-transitions-2] Starting a transition half way through another transition (#8687)

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

== [css-view-transitions-2] Starting a transition half way through another transition ==
Imagine a list of items that randomly reorders and changes background colours, with each list item having its own `view-transition-name`.

Let's say, a reordering happens, then another happens halfway through the previous transition.

By default, the new transition causes the previous transition to skip to the end, and the new transition starts from that point. That gives you a stable start point for the animation, but it doesn't look great visually.

Alternatively, the developer could queue on the previous `transition.finished`. This gives a smoother animation, but a delay to the interaction.

Something we don't offer right now is the ability to pick up from where the previous transition was at the point of skipping.

In this simple case we could make it work (via an opt-in) like this:

---

During the "old" capture phase:

1. If the developer has opted to continue from the current transition:
    2. For each group in the current transition:
        3. Capture that group as the old state of a named element for the new transition. That includes capturing its border-box. The capture we take may be mid-crossfade.
        4. If an element with that name exists in the current DOM, then it's omitted from any further captures.
2. Continue the capture as usual.

---

However, things get messy in more complex cases:

If the developer is interrupting a state-A to state-B transition with a transition to state-C, they may now have groups in the transition that wouldn't usually be there in a state-B to state-C transition. They'd have to carefully plan for this.

Or a case like this:

- The page has a user-avatar. It does not have a `view-transition-name`.
- A state-A to state-B transition is performed. The user-avatar exists in both states.
- The transition is interrupted with a transition to state-C. The user-avatar exists in both states, but now it does have a `view-transition-name`.

In this case I don't see how we "continue" the animation of the user-avatar, as it's likely embedded in some other group. This is particular an issue for the `::view-transition-old` from the first transition, since the avatar is somewhere in there as pixels, and we can't extract it.

The only sensible thing we could do here is create a transition group for the user-avatar using its DOM state-B as the 'old' and DOM state-C as the 'new'. That might result in the user seeing multiple user-avatars, since a copy of it is already baked into another group.

Maybe there's a better way?

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


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

Received on Wednesday, 5 April 2023 08:05:07 UTC