Popstate不适用于页面过渡动画

时间:2018-12-07 18:23:41

标签: ajax browser-history fetch-api popstate

我在anime.js中使用Fetch api,问题出在后退和前进按钮上,我无法添加动画,不能正确删除旧容器并添加新容器...

function fetchPage(link,page){     让baseURL = ${window.location.protocol}//${window.location.hostname};

if (window.location.port) {
    baseURL += `:${window.location.port}`;
}

fetch(`${baseURL}/${page}`)
    .then(function(response) {
        return response.text()
    })
    .then(function(html) {
        let doc = new DOMParser().parseFromString(html, "text/html");

        anime({
            targets: '.big-text, .big-text__title',
            translateX: 500,
            opacity: [1,0],
            easing: 'easeInExpo',
            duration: 500,
            complete: (anim) => {
                document.querySelector('.column-wrapper').remove();
            }
        })

        setTimeout(function () {
            document.querySelector('body').insertBefore(doc.querySelector('.new-content'),null);
                $.getScript('js/separated.js');

                anime({
                targets: '.big-text, .big-text__title',
                translateX: [-500, 0],
                delay: (el, i) => 100 * i,
                opacity: [0, 1],
                easing: 'easeOutExpo',
            })


        }, 700);
    })


  window.addEventListener('popstate', function(){
          fetchPage(baseURL, location.pathname);  

})

}

0 个答案:

没有答案