PJAX和CSS转换

Question

我使用pjax库动态地将内容从不同的页面加载到当前页面。我想要的是

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. 移除隐藏类并添加显示类，该类为容器动画。