Use View Transitions API for <transition>

[hfhchan]

What problem does this feature solve?

View Transitions API (currently supported by Chrome only) is a browser-provided API to do full page or shared element transitions. It greatly simplifies the implementation of <transition> as the Vue can directly mutate the DOM state and no need to keep both the old and new components in the DOM at the same time.

What does the proposed API look like?

The <transition> element should call the View Transition API directly if it is supported. Alternatively, a new element such as <native-transition> can be provided as it seems the currently CSS syntax is not identical.

[RihanArfan]

I'm very interested in this too and given it some thought. Since the current <transition> element is used for making regular CSS transitions, I think the View Transition API should be a separate component which could be used with the vue-router.

Also worth noting it's being added to Nuxt 🥳 nuxt/nuxt#20092

[yisibl]

Astro 2.10: Persistent State in View Transitions

[Anoesj]

It seems to me developers would need to add more CSS in their projects to support both the View Transitions API (if available) and Vue's own transitions API. Therefore, if this is added, it probably needs to be an opt-in feature. A new "modern" prop on the <Transition> and <TransitionGroup> components to enable it could work. Also, adding a global Vue config setting to enable modern on all instances of <Transition> and <TransitionGroup> by default might be nice ("app.config.enableModernTransitions"?).

[Anoesj]

Tagging @danielroe, maybe you have some ideas on how to properly add this to Vue? 😃