[css-view-transitions-2] Automatically start view transitions for <dialog>, Popover, etc.

[mfreed7]

This possibility was raised in whatwg/html#7785 (comment). The idea is that perhaps a ViewTransition could be automatically started, with appropriate modifications to existing algorithms, for <dialog>, Popover, and perhaps even any element moving to/from display:none.

Option 1: content attribute

One option would be to add a content attribute that confers this behavior:

<dialog autostartatransition>
  When shown/closed, a View Transition will start
</dialog>

When that attribute is present, existing algorithms such as showModal() would be modified to 1) start a ViewTransition, then 2) run existing steps for the algorithm that show/hide the element.

The content attribute approach would seem to work for most element types, including perhaps even when <div autostartatransition> becomes <div style="display:none" autostartatransition>. All of these would require thought about how to incorporate this behavior into all of the relevant spec algorithms.

Option 2: individual APIs

Another alternative would be to modify existing APIs:

myDialog.show({autostartatransition: true});
myDialog.showModal({autostartatransition: true});
myDialog.close({autostartatransition: true});
myPopover.showPopover({autostartatransition: true});
myPopover.hidePopover({autostartatransition: true});

I'm not sure how that would look for the plain <div style="display:none"> example.

[jakearchibald]

The attribute solution looks good. I think this will depend on scoped view transitions.

I don't think regular divs should have such a simple solution. It's easy for dialogs and popovers because they're positioned outside of regular content flow. With a regular div, animating the div out is easy, what's hard is deciding what should happen with everything else that moves as a result.

Eg, in this example (Canary with view-transition flag required), I deliberately make the content beneath the video transition position. However, this is hard to generalise. A rule like "everything transitions from its before to after position" would be an explosion of layers, and look really ugly in non-trivial cases.

[ydaniv]

Although this is very cool, and we could, why should we use view-transitions there?
The whole idea of view-transitions is to have 2 elements to transition between, while here we're simply doing an entry/exit animation on a single element.
This seems like an overkill, unless I'm missing something? 🤔

[jakearchibald]

VT is really useful for exit animations in particular. It allows you to remove the element immediately, but create a transition that extends beyond that point.

[ydaniv]

Hmm, I see, yet these elements aren't removed from the DOM, just from the layout/paint tree, right? It's a simple show/hide... isn't it?
Or are you referring to it entering/exiting the top layer?

[jakearchibald]

Hmm, I see, yet these elements aren't removed from the DOM, just from the layout/paint tree, right?

It can be either. VT considers an element to be gone when it doesn't render. That can be DOM removal, or things like display: none.

[chrishtr]

Now pursuing #8189 instead.