spicychickensauce
Extending LiveView with View Transition API support
I’ve previously explored what is possible today with hacks to implement view transitions in our apps:
I have since created a fork to implement proper support.
I’m quite happy with it and hope this can make it into phoenix.
Here is the fork: GitHub - spicychickensauce/phoenix_live_view at implement-view-transitions · GitHub
Here is a demo app using the fork: LiveView View Transitions Demo · GitHub
And here is a quick video of that demo: https://imgur.com/a/OvhnSVm
The API adds two new functions:
start_view_transition(socket, options), needed to trigger page transitions + same document transitions on update.
and
JS.start_view_transition(js, options), needed when using JS.navigate() or similar.
The current implementation is still a bit hacky and the passed options are not fully conistent yet, but before polishing this more I’d ideally like to get some buy in from any members of the phoenix team first.
I’m also open to any suggestions on how to improve this or on use cases that couldn’t be implemented using this API.
Most Liked
steffend
Sorry, I didn’t find the time to look at it earlier. Because I’m not too familiar with view transitions, I tried to work on a more generic API that allows you to do this without being specific to view transitions. See Add onDocumentPatch callback and allow specifying event dispatch phase by SteffenDE · Pull Request #4043 · phoenixframework/phoenix_live_view · GitHub and the linked gist where I adapted your example to use this new API.
We’ll have to see what other maintainers think about it, but it looks like a good solution to me!
steffend
The reason why I don’t want to go for a view transition specific API for now is that I don’t want to decide on an API without having more experience using them. When people start using view transitions more and more, we should look into a nicer API for sure.
spicychickensauce
Wow, that’s very nice, thank you very much!
Going for a more generic approach also makes sense to me, but I’m not so sure if it’s needed. Do you know any other applications for this other than view transitions?
If not, going for the more specific implementation seems nicer to me from a user perspective, as it would make it easier to document.
But I totally understand if you want to keep it generic from a maintenance perspective, as that requires less knowledge.
Either way, thank you very much for adapting my example and implementing an alternative, I’d also be quite happy with this solution!
Popular in Proposals: Ideas
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"