[✨] Support View Transition API

[swwind]

Is your feature request related to a problem?

I came into this interesting API introduced in this article. (MDN, Caniuse)

View Transition API brings better transition animations for SPA, but not widely supported yet (Only on Chrome 111+ now).

The API is simple, we just need to use document.startViewTransition() to wrap any DOM changes in it. If the function does not exists, we can simply apply the DOM changes without it.

This should be easy to implement (Maybe?).

Describe the solution you'd like

-

Describe alternatives you've considered

-

Additional context

No response

[swwind]

Dived into the source code a little bit, and I find it is pretty hard for me to implement this feature.

Tracking the DOM change after triggering a navigation is hard to follow, and even some part of code seems to be unfinished yet.

https://github.com/BuilderIO/qwik/blob/63f77a55b3a05cf314f3e7fb17937716943f184c/packages/qwik-city/runtime/src/client-navigate.ts#L85

[swwind]

@jordanw66 it's hard to say this PR makes it better for supporting the view transition api.

The API itself supports async functions as the update DOM callback, so we can start the transition when we want to start a navigation, and resolves it when all the DOM changes was applied. This PR uses a custom <script> element and a MutationObserver to tracking the DOM changes, and unfortunately this will not work if we started document.startViewTransition function before that. The document.startViewTransition will cache all the DOM changes under the hood and qsettled event will never be triggered since no DOM actually changes before we resolve the view transtion.

[mhevery]

Related https://github.com/BuilderIO/qwik/issues/3664 and https://github.com/BuilderIO/qwik/issues/2078

[wmertens]

The PR was merged, let's move all discussion to QwikDev/qwik-evolution#55