PJAX и CSS переходы

Question

Я использую библиотеку pjax jquery для динамической загрузки контента с другой страницы на текущую страницу. То, что я хочу, это

1. Добавьте класс скрытия в контейнер, чтобы применить переход.
2. Сделайте вызов PJAX, чтобы загрузить содержимое в контейнер.
3. Удалите класс скрыть класс, чтобы показать новый контент.

Вот мой код

$(document).on('click', 'a[data-pjax]', function(e){

    var $this = $(this);
    var fragment = $this.data('fragment');
    var container = $this.data('container');
    var $container = $(container);
    var event = e;

    //event.preventDefault();

    // Change active link
    $('.tabs-nav__link').removeClass('tabs-nav__link--active');
    $this.addClass('tabs-nav__link--active');


    $(document).on('pjax:beforeReplace', function(){
        $container.addClass('pjax-container--hide');    
    });

    $(document).on('pjax:complete', function(){
        $container.removeClass('pjax-container--hide');
    });



    $.pjax.click(event, {container: container, fragment: fragment, scrollTo: false});

    return false;

});

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

Answer 1

Если вы не измените pjax Библиотека JS, невозможно контролировать скорость / поток.

вместо этого вы можете сделать это так

1. Добавить класс скрытия в контейнер (без анимации)
2. Сделайте вызов PJAX, чтобы загрузить контент в контейнер
3. Удалите класс hide и добавьте класс show, который анимирует контейнер.