javascript - pjaxでgithubスタイルのページトランジションを作成する方法

Question

かつて、githubページの移行はpjaxによって行われるという記事を読んだことがありますが、jquery-pjaxプロジェクトを確認しました。私は答えに近いと思います。それはイベントpjax:startに関連するものであるに違いありませんがpjax:end、それでもうまくいかないので、ここで助けを求めようとしています。

$('a.pjax').pjax('#main');
$('#main').bind('pjax:start', function(){$('#main').slideUp()})
  .bind('pjax:end'), function(){$('#main').slideDown()});

しかし、効果はありません

Answer 1

Githubは、ページ遷移にHTML5機能を使用します。これには、新しいJSHistoryAPIとCSS3トランジションが含まれます。標準のイベントリスニング、セレクターを除いて、jQueryは関係しません。ブログ投稿は、関連するすべてのリンクとともにここにあります https://github.com/blog/760-the-tree-slider

Answer 2

これが関連しているかどうかはわかりません。しかし、私は自分で Pjax を使用しており、上記のコードには構文エラーがあります。

$('a.pjax').pjax('#main');
$('#main').bind('pjax:start', function(){$('#main').slideUp()})
.bind('pjax:end', function(){$('#main').slideDown()});

編集：はい、それを指摘せずに申し訳ありません。まさに@Udo Heldが言ったように：「pjax：end」の後にブラケットを削除する必要があります。そうしないと、それが実行されず、 $('#main').slideDown() 関数が実行されません。

Answer 3

Pjax : Demo , Source[Github]
githubが使っているものです..参考