1

画面からスライドして新しいコンテンツをロードし、スライドバックする div があります。私はjquery pjaxを使用していますが、その部分はうまく機能します:

$('#menu a').on('click', function(event){

  event.preventDefault();

  var target = $(this).attr('href');

  $('li.current').removeClass("current");
  $(this).parent().addClass("current");

  $(content).transition({left:$(document).width()}, 900, 'out', function() {

    $.pjax({
      url: target,
      container: '#content',
      fragment: '#content',
      success: function(){
        $(content).transition({ left:'0px'}, 900, 'out');

        var contentHeight = $('#content').outerHeight(true)+258+$("#footer").outerHeight(true);

        if(contentHeight<parseInt($("body").css("min-height"))){
          contentHeight = "100%";
        }

        $(page).stop(true).animate({height:contentHeight}, 1000, "easeOutCubic");
      }
    });

  });

});

しかし、ブラウザの戻る/進むボタンが使用されている場合、機能しません。私はさまざまなことを試しました。ここで素敵な記事を見つけましたが、わかりません: http://artfindertech.wordpress.com/tag/historyapi/

問題は、ブラウザの戻るボタンをクリックした瞬間に div の内容が変わることです。その後、スライドしますが、戻りません。また、URL は 1 秒間前のページに変わりますが、サイトのメイン URL にジャンプします。popState の私のトライアルは次のとおりです。

$(window).on('pjax:popstate', function() {

  $(content).transition({left:$(document).width()}, 900, 'out', function() {

    $.pjax({
      container: '#content',
      fragment: '#content',
      success: function(){
        $(content).transition({ left:'0px'}, 900, 'out');

        var contentHeight = $('#content').outerHeight(true)+258+$("#footer").outerHeight(true);

        if(contentHeight<parseInt($("body").css("min-height"))){
          contentHeight = "100%";
        }

        $(page).stop(true).animate({height:contentHeight}, 2000, "easeOutCubic");
      }
    });

  });

});
4

1 に答える 1

1

私は今同じことをしようとしています。つまり、ポップステートでアニメーション機能を取得しようとしています。私が今見ている方法は次のとおりです。

  1. メニューをクリックすると、コンテンツをアニメーション化し、新しいコンテンツでコンテナを埋める関数が呼び出されます - 
    function animation(PageTitle,PageLink,check) {
    //メニューからの呼び出しかどうか、それ以外の呼び出しかどうかを確認します
    //アニメーションと ajax の完全な呼び出し時
    もし (チェック) {
        setHistory(PageTitle,PageLink); // 別個の関数を個別に呼び出す
    }
}
  2. 上記のように、アニメーションが終了した後、メニューリンクからの呼び出しの場合、window.history.pushState に関する関数を呼び出します - 
    関数 setHistory(PageTitle,PageLink) {
    window.history.pushState({'ptitle':PageTitle,'plink':PageLink}, PageTitle, PageLink);
}
  3. その後、逆アニメーションとajaxに関数を呼び出すonpopstatee関数を設定します- 
    window.onpopstate = 関数 (イベント) {
    animation(event.state.ptitle,event.state.plink,false);
}

まだテストしていませんが、現在実装しています。それが機能する場合、私はこれを更新します...

アップデート：

これを更新して、私が推測したように、それが魅力のように機能することを伝えるだけです。もう 1 つ、関係者のために...相対変数とアニメーションを使用して元のページに戻る可能性を持たせるには、元のページの読み込み時にhistory.replacestateを呼び出す必要があることがわかりました。

于 2014-02-20T18:01:04.477 に答える