13

ページをアニメーション化するにはどうすればよいですか：ターボリンクで変更しますか？

それは可能ですか？

ボディでCSSトランジションを試しましたが、期待どおりに機能しませんでした。ウィンドウの一部だけを更新して、それが完了したときにコールバックを作成する方法、またはそれが可能かどうかさえわからない。

前もって感謝します

4

2 に答える 2

14

このようなものが機能する可能性があります（jQueryを使用するCoffeeScriptで）：

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

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

CSSアニメーションやより複雑なJavaScriptを使用することもできます。これは、いくつかの例とデモを詳しく説明したすばらしい投稿です。

また、ターボリンクトランジションのruby gem（テストしていません）に出くわしました。

于 2013-04-24T05:11:31.917 に答える
3

ウィンドウの一部だけをターボリンクで更新することはできません。代わりにpjaxを使用することをお勧めします。ただし、ページの一部のみをターボリンクで遷移および更新しているように見せるために、いくつかのトリッキーなことを行うことができます。

いくつかのアイテムを一覧表示するインデックスページがあります。アイテムをクリックすると、表示ページに移動します。しかし、ショーページから他のアイテムのショーページに直接移動できるようにしたいのです。インデックスページでは、アイテムのリストは6列幅ですが、詳細を表示するために、ショーページではより狭くなるようにアニメーション化しています。

// 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の列を6または3に設定します。

最終的には、ページを変更するときに#target_divがアニメーション化されているように見えますが、実際には、ページを変更する前に遷移しており、両方のページが異なる状態で同じdivをレンダリングします。

于 2012-10-23T13:56:12.147 に答える