javascript - 如何在点击时切换类以动画化 AJAX 页面转换

Question

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

问题是 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

如果您遇到动画在完成前被移除并因此不可见的问题。您可能希望监听动画事件何时结束，然后在回调中删除该类(如果确实需要删除)，而不是在页面加载完成后将其删除。