我在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);
})
}