animate page:change with turbolinks [closed]

Question

How can I animate the page:change with turbolinks?

Is that possible?

I tried a css transition on body but it did not work as expected. Don't know how to update just one part of the window and made a callback when it's done, or if it is even possible.

Thanks in advance

Answer 1

Something like this might work (in CoffeeScript using jQuery):

$(document).on 'page:fetch', ->
  $('#content').fadeOut 'slow'

$(document).on 'page:restore', ->
  $('#content').fadeIn 'slow'

You could also use CSS animations or some more complicated JavaScript. Here's a great post that goes in-depth with some examples and demos.

Also, I came across a turbolink transitions ruby gem (which I have not tested).