Add support for "on-site" view transitions

[SaschaLeh]

Which @angular/* package(s) are relevant/related to the feature request?

No response

Description

The current implementation of the View Transition API with the withViewTransitions() router feature enables view transition in our applications' routing context. However, it is essential to remember that there are also ‘on-site’ use cases for the View Transition API to make transitions within a view more visually appealing.

Examples of such cases would be, for example, sorting lists or even opening and closing accordions, as shown in the following examples:

• Example 1
• Example 2
• Example 2

In order to open up these possibilities to Angular developers, a corresponding API is required that makes it possible to visualise ‘on-site’ DOM changes with the help of a view transition.

Proposed solution

A possible developer API could include a global injectable ViewTransitionRef that offers a startTransition function which takes, corresponding to the original document.startViewTransition() function, a callback function which includes the actions that lead to the actual DOM Change.

Alternatives considered

[atscott]

The current view transition api is best used for whole-page transitions and not really meant for the use-case you’re describing. I think what you’re looking for is the scope transitions proposal.

Aside from that, there’s not really a need for an injectable that’s just a wrapper around the native view transition function. You can just call that directly yourself, make updates to application state, and return a promise that resolves with afterNextRender.

Unless there’s something I’m missing here, I think this issue can be closed.

[alxhub]

We're definitely excited by the potential of scoped transitions :) but I agree with Andrew, there's nothing we can do at the moment.

[SaschaLeh]

@atscott and @alxhub, thank you for your feedback.

I agree with you that the view transitions were not directly developed for such a use case. But developers are creative, and even Bramus shows such use cases when he talks about view transitions. So, I think people will try it. That's why I first came up with the idea that it might be a great addition to Angular if we offered developers the use here with a simple API. I also agree that the scope transitions proposal fits the use case better.

Until then, we can at least make do with your suggested approach of using the "afterNextRender" promise and experiment. Thanks for that hint!