animierte Seite: Wechsel mit Turbolinks

Question

Wie kann ich die Seite animieren: Wechsel mit Turbolinks?

Ist das möglich?

Ich versuchte eine CSS-Transition auf Körper, aber es hat nicht wie erwartet funktioniert. Ich weiß nicht, wie man nur einen Teil des Fensters aktualisiert und einen Rückruf macht, wenn es fertig ist, oder wenn es überhaupt möglich ist.

Vielen Dank im Voraus

Answer 1

So etwas wie dies funktionieren könnte (in Coffeescript mit jQuery):

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

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

Sie auch CSS-Animationen oder etwas komplizierter JavaScript verwenden könnten. Here's a great post, die mit einigen Beispielen und Demos vertieft wird.

Auch ich stieß auf eine turbolink transitions ruby gem (die ich nicht getestet habe).

Answer 2

Sie nicht wirklich nur ein Teil des Fensters mit turbolinks aktualisieren können, können Sie pjax stattdessen verwenden. Aber Sie könnten einige knifflige Dinge tun, damit es so aussieht, als würde es nur einen Teil der Seite mit Turbolinks überführen und aktualisieren.

Ich habe eine Indexseite, die einige Elemente auflistet, und wenn Sie auf ein Element klicken, wird die Seite angezeigt. Aber von der Show-Seite möchte ich immer noch direkt zu den Show-Seiten anderer Artikel navigieren können. Auf der Indexseite ist die Liste der Elemente sechs Spalten breit, und ich animiere sie auf der Show-Seite, um Platz für die Details zu schaffen.

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

Definieren Sie eine einfache CSS-Klasse, um Änderungen an die Breite des Elements zu übergeben.

<!-- 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> 

Wir setzen Daten-no-Turbolink auf true auf die Links von so dass wir den Übergang wir ein wenig mehr Kontrolle haben kann.

# 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, das ist ein bisschen verrückt und vielleicht können wir einen allgemeineren Weg finden, dies zu tun. Aber hier ist der Run-down auf, was los ist:

Wir haben Turbolinks auf unseren .trans-Links deaktiviert, so dass Turbolinks nicht sofort die neue Seite abrufen (wir werden Turbolinks explizit mitteilen, wann es zu holen). Wenn wir auf einen .trans-Link klicken, wird das #target_div angezeigt und die Klassen .six und .three umgeschaltet. Ich benutze Foundation, also sind drei und sechs Teil meines Rastersystems und definieren die Breite meiner Divs. Wenn ich also von sechs auf drei wechsle ändert sich die Breite.

Das löst meinen CSS-Übergang aus, #target_div verringert sich in der Breite und löst dann das Übergangsende-Ereignis aus. Wenn der Übergang beendet ist, rufen wir Turbolinks.visit() auf unserer Ziel-URL auf.

Das #target_div sollte sowohl von der Index- als auch von der Show-Aktion gerendert werden. Wir haben den Teil, der auf page: restore hört, der die Spalten von # target_div auf sechs oder drei setzt, je nachdem, welche Aktion ihn rendert.

Das Endergebnis ist, dass #target_div wie wir Seiten sind Wechsel zu animieren erscheint, aber es wird der Übergang vor uns Seiten ändern und beiden Seiten machen die gleiche div nur an seinen verschiedenen Zuständen in der Realität.

Answer 3

Vielleicht ist diese http://turbolinks-transitions.herokuapp.com/ näher an dem, was Sie wollten. Erwarten Sie diese Funktionalität in zukünftigen Versionen von Turbolinks ... oder machen Sie Zukunft näher, indem Sie es erfinden und beisteuern)