H_MZ 2017-12-02 15:19 采纳率: 0%
浏览 24

一页网站页面过渡

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);
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥25 LT码在高斯信道下的误码率仿真
    • ¥45 渲染完成之后将物体的材质贴图改变,自动化进行这个操作
    • ¥15 yolov5目标检测并显示目标出现的时间或视频帧
    • ¥15 电视版的优酷可以设置电影连续播放吗?
    • ¥50 复现论文;matlab代码编写
    • ¥30 echarts 3d地图怎么实现一进来页面散点数据和卡片一起轮播
    • ¥15 数字图像的降噪滤波增强
    • ¥15 心碎了,为啥我的神经网络训练的时候第二个批次反向传播会报错呀,第一个批次都没有问题
    • ¥15 MSR2680-XS路由器频繁卡顿问题
    • ¥15 VB6可以成功读取的文件,用C#读不了