feat: View Transition API

[swwind]

What is it?

• Feature / enhancement
• Bug
• Docs / tests

Description

#3664

Use cases and why

This is very brute force implement for supporting View Transition API.

I'm not 100% sure this code doesn't introduce other problems, just for showing my solution.

output.mp4

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• Added new tests to cover the fix / functionality

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[swwind]

@manucorporat what do you think of this 🤔

[manucorporat]

I think this might be closer to the solution:
#3684

We dont want to be blocking for too long, qwik already buffers the dom operations and commits them all in one go!

[swwind]

@manucorporat I got your idea. I made some changes accordings to your #3684, and with more stuffs.

• add an option in <RouterOutlet /> to enable this feature manually.
• only use view transition when routeLocation has changed. ([wip] feat: View Transitions #3684 seems to have view transition every render, this is not ideal because we may not want to have animations in some simple signal changes)
• disable view transition if new routeLocation has the same pathname to old one. (this happens in hash link jumps)

However, <Link href="#xxx" /> seems to be broken but I think this is a problem due to an old DOM waiting problem and could be fixed in #3244 hopefully.

[manucorporat]

Interesting approach... I think it's pretty low risk approach!

[manucorporat]

wonder if this is a RouteOutlet o QwikCityProvider api? it really configures a global thing of qwikcity

[manucorporat]

The RouterOutlet, is just an Outlet, not the render itself.

[manucorporat]

Happy to merge an iterate from here!

[swwind]

@manucorporat I moved code from RouterOutlet to QwikCityProvider, and now the API looks like this

<QwikCityProvider enableViewTransitionAPI>
// ...
</QwikCityProvider>

In short, this code will set document.__q_view_transition__ when the SPA nav function is called, and checks this mark inside Qwik to decide whether use ViewTransition API or not.

However, I still doesn't write anything when you click the Back button to go to prior page. There exists a large difference in popstate event handler between main and #3244, if that PR was supposed to be merged, I think it's better to wait for that interface to be stabilized.

[manucorporat]

Gonna merge and do some minor fixes, I think we can enable by default (only for transitions) + disable the html root view-name layer with css. Seems like a no risk API to instruct the browser when the naviagtion happens, then developers can opt-in using CSS

[manucorporat]

Amazing job!

[manucorporat]

The other PR, i wanna merge, but it has a big API surface + big changes