Se você estiver usando Turbolinks em seu aplicativo Rails, que é o padrão no Rails 4, você pode adicionar uma pequena animação de transição de página. Não é necessário jQuery!
Se você quiser uma demonstração rápida, tente usar o menu de navegação em http://www.xtagon.com/
Provavelmente há muitas maneiras de fazer isso, mas foi assim que fiz.
O HTML
Você pode decidir quais partes da página animar. No meu caso, animei tudo, exceto o cabeçalho e a barra de navegação. Para este exemplo, forneça um de seus elementos e ID de primary-contente tudo dentro dele será tratado como o conteúdo principal para a transição.
O CSS
Vamos usar o maravilhoso animate.css para nossas transições. Experimente no site deles até encontrar uma transição de que goste e, em seguida, crie um arquivo animate.css personalizado . Solte aquele menino mau app/assets/stylesheets.
O JavaScript
Animate.css funciona adicionando a animatedclasse a um elemento, junto com a classe para a animação específica que você deseja executar. O que queremos fazer é conectar-se aos eventos page:fetche ao Turbolink page:changepara iniciar as animações quando a página mudar.
Salvar este pedaço de JavaScript para e certifique-se que é exigido no .app/assets/javascripts/turbolinks_transitions.jsapplication.js
document.addEventListener('page:change', function() {
document.getElementById('primary-content').className += 'animated fadeIn';
});
document.addEventListener('page:fetch', function() {
document.getElementById('primary-content').className += 'animated fadeOut';
});E aqui está no CoffeScript, se isso faz você flutuar:
document.addEventListener 'page:change', ->
document.getElementById('primary-content').className += 'animated fadeIn'
document.addEventListener 'page:fetch', ->
document.getElementById('primary-content').className += 'animated fadeOut'É isso aí!
Reinicie seu servidor Rails, carregue a página e pronto!