Question

我正在构建一个简单的练习项目，其中每个页面都通过AJAX加载，并使用CSS动画不透明度呈现fadeIn，fadeOut过渡。

问题是addClass和removeClass没有被执行。

JS（JQuery）

$(document).ready(function() {
// $('.mainSplash').css('height',$(window).height() - 60);

$(".aboutBtn").click(function(e) {
    e.preventDefault();
    var pageTitle =  $(this).text();
    var pageUrl = $(this).attr('href');

    changePage(pageUrl, true, pageTitle);
}); // click

function changePage(url, bool, pageTitle){
    $('#wrapper').addClass('animate');

    loadContent(url, bool, pageTitle);
}

function loadContent(url, bool, pageTitle){
    $.ajax({
        url: './' + url,
        type: 'get',
        contentType: 'html',
        success: function(data){
                // load content
                $('#content').html(data);

                // Change url
                if(url != window.location){
                    window.history.pushState({path: url}, pageTitle, url);
                }
        },
        complete: function(){
            $('#wrapper').removeClass('animate');
        }
    });
}

});

Here's the full Codepen project example

Answer 1

如果您在动画完成之前删除动画时遇到问题，那么它就不可见了。您可能希望在动画事件结束时进行侦听，并在回调中删除该类（如果确实需要删除），而不是在页面加载完成后删除它。

如何在单击时切换类以设置AJAX页面转换的动画

1 个答案: