animowana strona: zmień z turbolinkami

Question

Jak mogę animować stronę: zmieniać z turbolinkami?

Czy to możliwe?

Próbowałem przejścia css na ciele, ale nie działało zgodnie z oczekiwaniami. Nie wiem, jak zaktualizować tylko jedną część okna i wykonałem wywołanie zwrotne po jej zakończeniu lub jeśli jest to możliwe.

Dzięki z góry

Answer 1

Coś takiego może działać (w coffeescript użyciu jQuery):

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

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

Można również użyć animacji CSS lub trochę bardziej skomplikowany JavaScript. Here's a great post, która idzie w parze z kilkoma przykładami i demami.

Ponadto natknąłem się na turbolink transitions ruby gem (którego nie testowałem).

Answer 2

Naprawdę nie można aktualizować tylko jedną część okna z turbolinks, może chcesz używać pjax zamiast. Ale możesz zrobić kilka trudnych rzeczy, które sprawią, że będzie wyglądać, jakby zmieniały się i aktualizowały tylko część strony z turbolinkami.

Mam stronę indeksu, która zawiera listę niektórych przedmiotów, a po kliknięciu elementu przechodzi na stronę pokazu. Ale od strony pokazu nadal chcę móc przejść bezpośrednio do stron pokazowych innych przedmiotów. Na stronie indeksowej lista pozycji ma szeœć kolumn szerokości, a ja animuję go, by był węższy na stronie spektaklu, aby zrobić miejsce na szczegóły.

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

Zdefiniuj prostą klasę CSS, aby zmienić zmiany na szerokość elementu.

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

Ustawiamy wartość danych-no-turbolink na true w linkach, z których przechodzimy, abyśmy mogli kontrolować nieco więcej.

# 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, to trochę szalone i może uda się nam wymyślić bardziej ogólny sposób robienia tego. Ale tutaj jest spór o to, co się dzieje:

Wyłączyliśmy Turbolinks na naszych linkach .trans, aby Turbolinks nie pobierał natychmiast nowej strony (wyraźnie powiemy Turbolinks, kiedy ją pobrać). Po kliknięciu linka .trans wyszukuje #target_div i przełącza klasy .six i .three. Używam Fundacji, więc trzy i sześć są częścią mojego systemu kratek i definiują szerokość moich elementów div .. więc kiedy zmieniam z sześciu na trzy, zmienia się szerokość.

To powoduje przejście mojego CSS, #target_div zmniejsza szerokość, a następnie wystrzeliwuje zdarzenie końcowe przejścia. Po zakończeniu przejścia wywołujemy funkcję Turbolinks.visit() na docelowym adresie URL.

#target_div powinien być renderowany zarówno przez akcje indeksu, jak i show. Mamy część nasłuchującą strony: restore, która ustawia kolumny # target_div na sześć lub trzy w zależności od tego, która akcja ją renderuje.

Wynik końcowy jest taki, że animacja #target_div jest animowana, ponieważ zmieniamy strony, ale w rzeczywistości zmienia się przed zmieniamy strony, a obie strony renderują ten sam div właśnie w jego różnych stanach.

Answer 3

Być może ten http://turbolinks-transitions.herokuapp.com/ jest bliższy temu, co chciałeś. Spodziewaj się tej funkcjonalności w przyszłych wersjach turbolinków ... lub zbliż się do przyszłości, wymyślając i przyczyniając się)