I have been playing around with a fork of liveview to implement a proper API for this.
Here’s a small video of a demo app with view transitions implemented with my fork: https://imgur.com/a/tGz06Eb
Still very rough, but it demonstrates that it works.
The API I implemented is: JS.start_view_transition and start_view_transition(socket).
types can be passed as an option.
I also needed to add a temp_name option, which allows implementing this common technique of giving an element a transition name just for the start of the view transition, like they do in this article: Same-document view transitions for single-page applications | View Transitions | Chrome for Developers.
Doing that looks like this:
JS.start_view_transition(temp_name: "img-full", to: "#element") |> JS.navigate("/card/#{@id}")
Once I’ve cleaned this up I’ll probably create a new post to propose this API and if deemed worthy enough I can open a PR.
