13

如何为页面设置动画：使用 turbolinks 更改？

那可能吗？

我在 body 上尝试了一个 css 过渡，但它没有按预期工作。不知道如何只更新窗口的一部分并在完成时进行回调，或者是否有可能。

提前致谢

4

2 回答 2

14

这样的事情可能会起作用（在使用 jQuery 的 CoffeeScript 中）：

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

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

您还可以使用 CSS 动画或更复杂的 JavaScript。这是一篇很棒的文章，其中包含一些示例和演示。

另外，我遇​​到了一个turbolink transitions ruby​​ gem（我还没有测试过）。

于 2013-04-24T05:11:31.917 回答
3

您不能真正使用 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

好的，这有点疯狂，也许我们可以找出一个更通用的方法来做到这一点。但这里是发生了什么的破败：

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

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

#target_div 应该由 index 和 show 操作呈现。我们有监听 page:restore 的部分，它将 #target_div 的列设置为六或三，具体取决于呈现它的操作。

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

于 2012-10-23T13:56:12.147 回答