trang animate: thay đổi với turbolinks

Question

Làm cách nào để tạo hiệu ứng cho trang: thay đổi bằng turbolinks?

Điều đó có khả thi không?

Tôi đã thử chuyển tiếp css trên cơ thể nhưng nó không hoạt động như mong đợi. Không biết cách cập nhật chỉ một phần của cửa sổ và thực hiện gọi lại khi hoàn thành hoặc nếu có thể.

Cảm ơn trước

Answer 1

Something như thế này có thể làm việc (trong CoffeeScript sử dụng jQuery):

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

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

Bạn cũng có thể sử dụng hình ảnh động CSS hay một số JavaScript phức tạp hơn. Here's a great post đi sâu với một số ví dụ và bản trình diễn.

Ngoài ra, tôi đã xem một số turbolink transitions ruby gem (mà tôi chưa thử nghiệm).

Answer 2

Bạn có thể không thực sự cập nhật chỉ là một phần của cửa sổ với turbolinks, bạn có thể muốn sử dụng pjax để thay thế. Nhưng bạn có thể làm một số điều phức tạp để làm cho nó trông giống như nó đang chuyển đổi và cập nhật chỉ một phần của trang với turbolinks.

Tôi có một trang chỉ mục liệt kê một số mục và nếu bạn nhấp vào một mục, nó sẽ chuyển đến trang hiển thị. Nhưng từ trang hiển thị, tôi vẫn muốn có thể điều hướng trực tiếp đến các trang hiển thị của các mục khác. Trên trang chỉ mục danh sách các mục có sáu cột rộng và tôi tạo hiệu ứng động cho nó để thu hẹp trên trang hiển thị để nhường chỗ cho các chi tiết.

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

Xác định lớp CSS đơn giản để chuyển đổi thay đổi thành chiều rộng của phần tử.

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

Chúng tôi đặt dữ liệu-không-turbolink thành đúng trên các liên kết mà chúng tôi chuyển đổi để chúng tôi có thể kiểm soát nhiều hơn một chút.

# 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 

Được rồi, điều này hơi điên rồ và có thể chúng ta có thể tìm ra cách làm chung hơn. Nhưng đây là thông tin chi tiết về những gì đang diễn ra:

Chúng tôi đã tắt Turbolinks trên các liên kết .trans của chúng tôi để Turbolinks không tìm nạp ngay trang mới (chúng tôi sẽ nói rõ ràng với Turbolinks khi tìm nạp). Khi chúng ta nhấp vào liên kết .trans, nó sẽ tìm kiếm #target_div và chuyển đổi các lớp .six và .three. Tôi sử dụng Foundation, vì vậy ba và sáu là một phần của hệ thống lưới điện của tôi và xác định chiều rộng của divs của tôi .. vì vậy khi tôi thay đổi từ sáu đến ba điều này thay đổi chiều rộng.

Điều đó kích hoạt quá trình chuyển đổi CSS của tôi, #target_div giảm chiều rộng và sau đó nó sẽ kích hoạt sự kiện kết thúc chuyển đổi. Khi quá trình chuyển đổi kết thúc, chúng tôi gọi Turbolinks.visit() trên URL mục tiêu của chúng tôi.

#target_div phải được hiển thị bởi cả hành động chỉ mục và hiển thị. Chúng tôi có phần nghe trang: khôi phục lại đặt cột # target_div thành sáu hoặc ba tùy thuộc vào hành động nào đang hiển thị nó.

Kết quả cuối cùng là #target_div xuất hiện động như chúng tôi đang thay đổi trang, nhưng thực tế nó chuyển đổi trước chúng tôi thay đổi các trang và cả hai trang hiển thị cùng một div ở các trạng thái khác nhau.

Answer 3

Có lẽ điều này http://turbolinks-transitions.herokuapp.com/ gần hơn với những gì bạn muốn. Mong đợi chức năng này trong các phiên bản tương lai của turbolinks ... hoặc làm cho tương lai gần hơn bằng cách phát minh ra nó và đóng góp)