pagina animata: modifica con turbolinks

Question

Come posso animare la pagina: cambiare con i turbolinks?

È possibile?

Ho provato una transizione css sul corpo ma non ha funzionato come previsto. Non so come aggiornare solo una parte della finestra e fatto una richiamata quando è finita, o se è addirittura possibile.

Grazie in anticipo

Answer 1

Qualcosa di simile potrebbe funzionare (in CoffeeScript utilizzando jQuery):

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

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

Si potrebbe anche usare le animazioni CSS o JavaScript alcuni più complicato. Here's a great post che approfondisce con alcuni esempi e demo.

Inoltre, mi sono imbattuto in un turbolink transitions ruby gem (che non ho testato).

Answer 2

Non si può davvero aggiornare solo una parte della finestra con turbolinks, si consiglia di utilizzare pjax invece. Ma potresti fare alcune cose complicate per far sembrare che stia cambiando e aggiornando solo parte della pagina con i turbolinks.

Ho una pagina di indice che elenca alcuni articoli e se si fa clic su un elemento si passa alla pagina di presentazione. Ma dalla pagina dello show voglio ancora essere in grado di navigare direttamente alle pagine degli show degli altri oggetti. Nella pagina indice l'elenco degli elementi è largo sei colonne e lo animo per essere più ristretto nella pagina dello spettacolo per fare spazio ai dettagli.

// items.css.sass 
.width-trans 
    +transition(width 400ms ease-in) 

Definire una semplice classe CSS per il passaggio delle modifiche alla larghezza dell'elemento.

<!-- index.html.erb -> 
<div id="target_div" class="width-trans six columns"> 
    <%= link_to "Item", 
       item_path(@item.id), 
       :'data-no-turbolink' => true, 
       :class => 'trans' %> 
</div> 

Abbiamo set di dati-no-TurboLink true sui link stiamo transizione dal modo che possiamo avere un po 'più di controllo.

# items.js.coffee 
$(document).on 'page:restore', (e) -> 
    if window.location.href.match(/\/items\/\d$/) || window.location.href.match(/\/items$/) 
    $("#target_div").removeClass("three").addClass("six") 
    else 
    $("#target_div").removeClass("six").addClass("three") 

target_page = undefined # Sorry, this 'target_page' stuff is a little janky. 

if Modernizr.csstransitions 
    eventEndNames = 
    'WebkitTransition': 'webkitTransitionEnd' 
    'MozTransition': 'transitionend' 
    'OTransition':  'oTransitionEnd' 
    'msTransition':  'MSTransitionEnd' 
    'transition':  'transitionend' 

    eventName = eventEndNames[Modernizr.prefixed('transition')] 

    $(document).on eventName, '#target_div',() -> 
    Turbolinks.visit(target_name) if target_page 
    target_page = undefined 

$(document).on 'click', '.trans', (e) -> 
    e.preventDefault() 

    target_name = e.target.href 
    $(e.target).closest("#target_div").toggleClass("three six") 
    false 

Okay, questo è un po 'pazzo e forse possiamo trovare un modo più generale di fare questo. Ma ecco il malconcio su cosa sta succedendo:

Abbiamo disabilitato i Turbolink sui nostri link .trans in modo che Turbolinks non recuperi immediatamente la nuova pagina (diremo esplicitamente a Turbolinks quando recuperarlo). Quando facciamo clic su un collegamento .trans, si cerca #target_div e si alternano le classi .six e .three. Io uso Foundation, quindi tre e sei fanno parte del mio sistema di griglia e definiscono la larghezza dei miei div .. quindi quando cambio da sei a tre questo cambia la larghezza.

Che attiva la transizione CSS, #target_div si riduce in larghezza e poi spegne l'evento di fine transizione. Al termine della transizione, chiamiamo Turbolinks.visit() sul nostro URL di destinazione.

Il #target_div deve essere visualizzato sia dall'indice che dalle azioni di visualizzazione. Abbiamo la parte che ascolta la pagina: ripristina quale imposta le colonne di # target_div a sei o tre a seconda dell'azione che lo sta eseguendo.

Il risultato finale è che #target_div sembra animare come stiamo cambiando le pagine, ma in realtà si tratta di transizione prima cambiamo pagine e entrambe le pagine rendiamo lo stesso div solo nei suoi diversi stati.

Answer 3

Forse questo http://turbolinks-transitions.herokuapp.com/ è più vicino a quello che volevi. Aspettatevi questa funzionalità nelle versioni future dei turbolinks ... o rendete il futuro più vicino inventandolo e contribuendo)