一页网站页面过渡

Question

I have this code, which loads another html file inside the main one, can i ask how can i add transitions when i click on a link that triggers the XMLHTTPRequest, and where do i put it to achieve the effect of a single page site?

Could I add class first to run the animation then process the XMLHTTPRequest or something like that. any suggestions or source?

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);