Одинарная страница: изменение с turbolinks

Ответ 1

Что-то вроде этого может работать (в CoffeeScript с помощью jQuery):

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

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

Вы также можете использовать анимацию CSS или более сложный JavaScript. Здесь отличный пост, в котором подробно описаны некоторые примеры и демонстрации.

Кроме того, я столкнулся с turbolink переводит рубиновый камень (который я еще не тестировал).

Ответ 2

Вы не можете обновить только одну часть окна с помощью turbolinks, вместо этого вы можете использовать pjax. Но вы могли бы сделать некоторые сложные вещи, чтобы сделать его похожим на переход и обновление только части страницы с turbolinks.

У меня есть индексная страница, в которой перечислены некоторые элементы, и если вы нажмете элемент, он перейдет на страницу показа. Но со страницы показа я все же хочу, чтобы можно было перейти непосредственно к страницам показа других предметов. На индексной странице список элементов имеет ширину в шесть столбцов, и я одушевляю его более узким на странице показа, чтобы освободить место для деталей.

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

Определите простой класс CSS для перехода к изменению ширины элемента.

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

Мы устанавливаем data-no-turbolink в true по ссылкам, с которых мы переходим, поэтому мы можем иметь немного больше контроля.

# 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

Хорошо, это немного сумасшедший, и, возможно, мы можем найти более общий способ сделать это. Но здесь происходит то, что происходит:

Мы отключили Turbolinks на наших .trans-ссылках, чтобы Turbolinks не сразу извлекал новую страницу (мы будем явно указывать Turbolinks при ее получении). Когда мы щелкаем по ссылке .trans, он просматривает #target_div и переключает классы .six и .three. Я использую Foundation, поэтому три и шесть являются частью моей сетки и определяют ширину моих div. Поэтому, когда я изменяю от шести до трех, это меняет ширину.

Это инициирует мой переход CSS, #target_div уменьшает ширину, а затем запускает событие перехода. Когда переход заканчивается, мы вызываем Turbolinks.visit() на нашем целевом URL.

#target_div должен отображаться как с показателем, так и с показами. У нас есть часть, которая прослушивает страницу: restore, которая устанавливает столбцы #target_div в шесть или три в зависимости от того, какое действие ее выполняет.

Конечным результатом является то, что #target_div кажется оживленным, поскольку мы меняем страницы, но на самом деле он переходит до того, как мы сменим страницы, и обе страницы отображают один и тот же div только в разных состояниях.

Ответ 3

Возможно, это http://turbolinks-transitions.herokuapp.com/ ближе к тому, что вы хотели. Ожидайте эту функциональность в будущих версиях turbolinks... или сделайте будущее ближе, изобретая ее и помогая)