一页网站页面转换

Question

我有这个代码，它在主要内部加载另一个html文件，请问当我点击一个触发XMLHTTPRequest的链接时我怎样才能添加转换，我在哪里可以实现单个效果页面网站？

我可以先添加类来运行动画，然后处理XMLHTTPRequest或类似的东西。任何建议或来源？

let main = document.querySelector('body > main');

window.addEventListener('popstate', function (e) {
requestPage(e.state, false);
});
function requestPage (url, push) {
let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        main.innerHTML = xhr.responseText;
        attachLinkClickHandlers(main);

        console.log(xhr.responseText)
        if (push)
            history.pushState(url, document.title, url);
    }
};
xhr.open('get', url, true);
xhr.setRequestHeader('Content-Only', 1);
xhr.send();
}
function attachLinkClickHandlers (parent) {
let links = parent.querySelectorAll('a:not([href^="http"])');

[].forEach.call(links, function (link) {
    link.addEventListener('click', function (e) {
        requestPage(link.href, true);

        e.preventDefault();
        return false;
    });
});
}
attachLinkClickHandlers(document);
history.replaceState(location.href, document.title, location.href);