Digging into View Transitions with Turbo 8 and Rails
Вставка
- Опубліковано 23 лип 2024
- This is a super quick tutorial to show you the new ViewTransition API that ships with Turbo 8 and Rails, which was released recently.
View Transitions are a neat way to add more fluidity between views in your app. With Rails and Turbo 8, adding this effect is pretty straightforward. The most challenging obstacle is understanding the CSS side of the equation.
Follow along as I demo different ways to leverage the View Transition API using Turbo 8 and Ruby on Rails.
📕 Read the full tutorial here - webcrunch.com/posts/view-tran...
Timestamps:
00:00 - Intro
00:55 - Browser support
01:15 - Global View Transition Demo with Rails and Turbo
02:26 - How Turbo adds data attributes to the html tag
02:45 - Different types of visits with Turbo
03:18 - Add CSS for more advanced global view transitions
03:52 - Demo of advanced global view transitions
04:11 - Combining global and individual view transitions
04:25 - View transition naming
06:14 - Final demo
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: ua-cam.com/users/webcrunc...
💻 Read the written version:
web-crunch.com/posts/view-tra...
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
hellorails.io
💻 The Blog (my source of truth): webcrunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: railsui.com.
👨💻 Hire me: Visit: railsui.com/custom
🐤 / webcrunchblog .
⚙️ github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!
✨ github.com/sponsors/justalever
☕️ www.buymeacoffee.com/webcrunch
View Transitions is still Chrome only but interesting video!
Hi! Is it works with Bootstrap or with Tailwind only?
No framework required actually! Just plain old CSS should do it. 👍
is it possible to set the direction between pages somehow? for eg, get it to slide forward going to edit, and back when cancel?
There are different data attributes added with Turbo you can target with CSS and do this. It's a little more involved but possible!
@@Webcrunch ive got css targeting the direction when turbo decides its back (when you click the browser back button basicly) but i cant TELL it to go back. i was hoping i could for eg add a data attribute to a back button on the edit screen to make the turbo_visit_direction be back
I wonder if instead of turbo we should use HTMX. (we = rails community)
Any opinion?
I'd look at stimulus if you haven't. It's very similar to HTMX and aspects of turbo. I suppose it depends if you're site is super simple/static versus something more full stack like Rails.
*Promo sm* ✌️