PJAX and CSS Transitions

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. 删除隐藏类并添加使容器动画的显示类。