I've been using Turbolinks (with jquery.turbolinks) in a lot of my projects recently in an attempt to keep things fast while still doing most all of the rendering on the server. I like that Turbolinks more or less works out of the box without a ton of dependencies or set up and, IMO, speeds up page renders. The problem I ran up against was to add page transitions (like a swipe effect) to mobile pages. Since Turbolinks just swaps the body of the document without any incremental steps, it's a little tricky to effectively animate that transition. The way I ended up overcoming it was to use Turbolinks’ event emissions to add classes to the HTML node and animate a child node with CSS transforms.
The SCSS (the
@media rule keeps this on mobile-only):
page:fetchadd the ‘loading’ class to the HTML, causing the
#page-contentnode to swing hard left (the negative X translation) and appear to ‘swipe away’ off-screen (that's the
page:changewe remove ‘loading’ from the HTML, causing
#page-contentto swing hard right (the positive X translation) so it resides in the wings of the page, invisible until…
- We add the ‘loaded’ class to the HTML, removing any translation on the
#page-contentnode, animating it into center position where it looks just fine and normal.
A note on Bootstrap: I'd used
translate3d(0, 0, 0) for the ‘loaded’ state
before but it totally breaks any instances of the Bootstrap modal whereas the
transform(none) doesn't. The modals use a translate3d effect to slide them
into view and for whatever reason the stacking of these effects doesn't play
nice in Chrome.