Как добавить эффект fade in/out в 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, я просто использую это, потому что это самый простой. Итак, что бы я сделал, это обернуть свой контент, который вы хотите затухать с контейнером, и дать ему идентификатор #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); 
     } 
    }); 

Так что же происходит мы скрываем #content-container на pjax beforeSend, а затем затухаем обратно на pjax complete, как это говорится в разделе обратных вызовов документации. Вы можете контролировать скорость, с которой она исчезает, изменяя номер, где указано .fadeIn(1000), меняя его, чтобы сказать, что 800 сделает его быстрее.

В любом случае, надеюсь, что это не было слишком запутанным, если у вас возникли вопросы, связанные со мной в комментариях ниже.