spicychickensauce
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.
Where Next?
Trending in Proposals: Ideas
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Bringing learning, work and compliance together since 1987.
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
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #genstage
- #ai
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #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, logs, uptime, and Just Enough APM. Built for developers.
Bringing learning, work and compliance together since 1987.
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!"
First 5 of 5 Posts
spicychickensauce
I’m a bit sad I got no replies here…
Not sure if its ok to tag you, but @chrismccord @steffend, I’d greatly appreciate if you could provide any feedback, thanks!
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!
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!
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.
karolsluszniak
Thank you both for pushing this forward! I have a few SPA-like LV apps, also currently seeking for the best way to pack them as AppStore apps (e.g. with Capacitor, Flutter or a custom shell) with proper native feel, and these transitions would be a game changer so I’d absolutely love to see these possible. Can’t wait for the above PR to land in LV.