Skip to Main Content
Modern Front-End Development for Rails, 2nd Edition
book

Modern Front-End Development for Rails, 2nd Edition

by Noel Rappin
September 2022
Intermediate to advanced content levelIntermediate to advanced
410 pages
10h 7m
English
Pragmatic Bookshelf
Content preview from Modern Front-End Development for Rails, 2nd Edition

Animating Turbo Streams with Animate.css

All this animation talk makes me wonder about the transitions we built in Chapter 2, Hotwire and Turbo with Turbo Streams, where we have new elements appearing in our favorites list and old ones being removed. It’d be cool to be able to animate those transitions. Turns out we can do this, though managing the outgoing transitions takes a little bit more work.

I’m going to call in a helper for the animation, rather than continuing to code the transitions by hand. The Animate.css library adds quite a few useful little CSS animations that are just a couple of CSS classes away.[43]

Installing Animate.css

Animate.css is distributed as an NPM package that contains both JavaScript and CSS. We haven’t encountered ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Modern Front-End Development for Rails

Modern Front-End Development for Rails

Noel Rappin

Publisher Resources

ISBN: 9781680509977Errata Page