Ruby on rails 3.2 设置页面动画：使用TurboLink进行更改

如何设置页面动画：使用TurboLink进行更改

可能吗

我在body上尝试了css转换，但并没有像预期的那样工作。 不知道如何只更新窗口的一部分，并在完成时进行回调，或者如果可能的话

---

提前感谢

您不能用TurboLink只更新窗口的一部分，您可能需要使用pjax。但是你可以做一些棘手的事情，让它看起来像是用TurboLink转换和更新页面的一部分

我有一个索引页面，其中列出了一些项目，如果单击某个项目，它将转到“显示”页面。但从显示页面，我仍然希望能够直接导航到其他项目的显示页面。在“索引”页面上，项目列表有六列宽，我在“显示”页面上将其动画设置为更窄，以便为详细信息腾出空间

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

好吧，这有点疯狂，也许我们可以想出一个更一般的方法。但下面是对正在发生的事情的总结：

我们已经在.trans链接上禁用了Turbolinks，这样Turbolinks就不会立即获取新页面（我们将明确告诉Turbolinks何时获取它）。当我们单击.trans链接时，它会查找#target_div并切换.six和.3class。我使用基础，所以三和六是我的网格系统的一部分，并定义我的div的宽度。所以当我从6变为3时，宽度就变了

这会触发我的CSS转换，#target_div减小宽度，然后触发转换结束事件。当转换结束时，我们在目标URL上调用TurboLink.visit（）

#target_div应该由index和show操作呈现。我们有监听页面的部分：恢复将#target_div的列设置为6或3，这取决于呈现它的操作

---

最终的结果是#target_div在我们更改页面时看起来像是动画，但实际上它在我们更改页面之前进行了转换，并且两个页面在不同的状态下呈现相同的div。

类似的内容可能会起作用（在使用jQuery的CoffeeScript中）：

您还可以使用CSS动画或一些更复杂的JavaScript。这将通过一些示例和演示深入讨论

---

此外，我还遇到了一个（我还没有测试过的）。

太多的工作/代码没有那么多的功能。不过还是要谢谢你。是的，我同意。这就是为什么我在前面说，这可能是更一般化的东西；也许有人会对基于它或其他东西编写一个可重用插件感兴趣。哦，正如我在评论开始时所说的。。您可能需要考虑使用PJAX来代替。它更加灵活，允许您更新页面的特定部分。这也是github使用的，他们用它在页面之间制作动画。是的，我正在看它。。我也考虑调整Turbink和拉请求改变，但是，我现在没有时间这样做。无论如何，再次感谢你的回答。哈哈，这就是我最终解决这个问题的方法，而这个宝石也是我创造的=）我应该注意到它是同一个昵称。真有趣。哈哈。是的，哈哈，好吧，至少问题已经解决了。嗨，我认为这不适用于Turbolinks 5（主要活动已重命名）。有机会升级吗？

# 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

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

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