如何將淡入/淡出效果添加到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格，然後將容器在內容加載後淡入。將內容淡出然後淡入新內容將會有點困難，並且通過淡出內容，pjax容器將加載內容的速度比您可以淡化內容的速度更快，因此它看起來很愚蠢淡出它。既然你在下面的評論中說過你可以使用jquery的問題，我會使用它，因爲它是最簡單的。所以我要做的就是將你想要淡入容器的內容封裝起來，並給它一個#content-container的ID。如果你正在使用類似的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上的#content-container，然後在pjax complete上淡出它，就像它在文檔的回調部分中所說的那樣。你可以通過改變數字來控制它淡入的速度，它將.fadeIn(1000)改爲800來加快速度。

無論如何，希望這不是太混亂，如果你有任何問題打我在下面的評論。