pjax-standaloneにフェードイン/アウトエフェクトを追加するには？

Question

私はPJAX-Standaloneを使ってウェブサイトのページを読み込みました。新しいコンテンツが読み込まれたときにフェードアウト/イントランジションを追加したいのですが、これを達成するにはどうすればよいか分かりません。

PJAXのドキュメントでは、「コールバック」について説明しています。新しいコンテンツがフェードインする間に既存のコンテンツがフェードアウトするように、これらのフェードトランジションを追加する方法はありますか？私はこの頭の中でjQuery/Javascriptのnoobとして最初に飛びついていますが、私は学びたいと思っていますので、どんな助けやアドバイスも大歓迎です！

これは私が私のwrapper.phpに含まれているものです：

// PJAX links! 
 
    pjax.connect({ 
 
    'container': 'content', 
 
    'success': function(event){ 
 
     var url = (typeof event.data !== 'undefined') ? event.data.url : ''; 
 
     console.log("Successfully loaded "+ url); 
 
    }, 
 
    'error': function(event){ 
 
     var url = (typeof event.data !== 'undefined') ? event.data.url : ''; 
 
     console.log("Could not load "+ url); 
 
    }, 
 
    'ready': function(){ 
 
    console.log("PJAX loaded!"); 
 
    } 
 
    });

Answer 1

おそらくこれについて移動する最も簡単な方法は、ちょうどその#contentのdivをラップコンテナを非表示にすることですコンテンツが読み込まれた後にフェードインします。コンテンツを消してから消すのはもう少し難しく、新しいコンテンツは消えてしまいます。本当に消えてしまわないようにしてください。pjaxコンテナは消えるよりも速くコンテンツをロードしますので、愚かに見えますそれを消すために。あなたがjqueryを使うことができるという質問の下のコメントでは、最も簡単なのでjqueryを使用します。ですから、コンテナでフェードインしたいコンテンツをラップして、IDを#content-containerにします。あなたはgithubのページのマークアップに似たマークアップを使用している場合は、次のようなものを使用することができます

<div id='content-container> 
    <div class='container'> 
     <div id='content' class='col-sm-8'> 
      <?php echo $contents; ?>    
     </div> 
     <div class='col-sm-4'> 
      ... sidebar stuff ... 
     </div> 
    </div> 
    <footer> 
     ... footer stuff ... 
    </footer> 
</div> 

をそして、あなたのJavaScriptとjQueryのコードは次のようになります。

// PJAX links! 
    pjax.connect({ 
     'container': 'content', 
     'success': function(event){ 
      var url = (typeof event.data !== 'undefined') ? event.data.url : ''; 
      console.log("Successfully loaded "+ url); 
     }, 
     'error': function(event){ 
      var url = (typeof event.data !== 'undefined') ? event.data.url : ''; 
      console.log("Could not load "+ url); 
     }, 
     'ready': function(){ 
      console.log("PJAX loaded!"); 
     }, 
     'beforeSend': function(e){ 
      $('#content-container').hide(); 
     }, 
     'complete': function(e){ 
      $('#content-container').fadeIn(1000); 
     } 
    }); 

だから何が起こっています私たちはをpjax beforeSendに隠していて、ドキュメントのコールバックのセクションにあるように、pjax completeに戻してフェードしていますか？ .fadeIn(1000)が800に変わると番号が変わると、スピードを遅くすることができます。

これはあまりにも混乱していないと思っています。