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