頁面轉換 - 等待 ajax 請求發出

Question

我正在嘗試在項目中重現此動畫 - https://codepen.io/victorwork/pen/bQPBvQ

目標是在ajax請求獲取新頁面的過程中，黑色背景和logo的屏幕，只有當ajax請求完成時，幕布才會消失。

我已經嘗試過使用 .pause() 然后使用 .resume() 但它在暫停時間內效果不佳，並且有時恢復速度更快。

我已經嘗試划分時間線，其中一個函數有動畫的開頭，另一個函數有動畫的結尾，第一次結果很好，但下面的沒有，我不太明白為什么。

有什么建議嗎？

這是代碼。

const entryTransitionPage = new TimelineMax( { paused: true });

entryTransitionPage
    .fromTo(transitionElementBlue , 1.2, { scaleX: 0 },{ scaleX: 1, transformOrigin:'left', ease: Power4.easeInOut},)
    .fromTo(transitionElementBlack , 1.2, {scaleX: 0},{scaleX: 1, transformOrigin:'left', ease: Power4.easeInOut}, .2)
    .fromTo(transitionContent , .6, {xPercent: -100, autoAlpha:0 }, {xPercent: 0, autoAlpha:1, ease: Power4.easeInOut}, .7)
    .set(transitionElementBlue, { scaleX:0 })
    .to(transitionElementBlack , 2, { scaleX: 0, transformOrigin:'right', ease: Power4.easeInOut })
    .to(transitionContent , .2, { autoAlpha:0 }, '-=1.2');



const entryPageAnimation = () => {
    entryTransitionPage.play(0);
    setTimeout(() => { entryTransitionPage.pause()}, 2000);
}

const endPageAnimation = () => {
    entryTransitionPage.resume();
}


const changePage = (url) => {
    entryPageAnimation();
    loadPage(url) 
}


const loadPage = (url) => {
  const xhr  = new XMLHttpRequest();
    xhr.onerror = () => { throw 'Request failed. HTTP code ' + xhr.status; };

    xhr.onload = () => {

        if (!xhr.status || (xhr.status >= 400)) throw 'Request failed. HTTP code ' + xhr.status;

        const documentAjax = (new DOMParser()).parseFromString( xhr.response,'text/html');
        document.body.className = documentAjax.body.className;
        const pageContent = documentAjax.getElementById('pageContent');
        const newPage = documentAjax.getElementById('pageSelector');
        const page = document.getElementById('pageContent');

        exitPageAnimation();
        setTimeout( () => {
          window.scrollTo(0, 0);
          if (newPage)  page.innerHTML = newPage.outerHTML;

        }, 700);
    }

    xhr.open('GET', url, true);
    xhr.send();

}

順便說一句，除了超時之外，有沒有什么方法可以在過渡動畫完成時插入新頁面的內容？

Answer 1

將動畫分成兩個不同的動畫 - startLoadingAnimation和stopLoadingAnimation 。 第一個動畫將只顯示黑色疊加層和加載文本，而第二個動畫將隱藏它們。

檢查我的代碼段並在getPageAsync()函數中實現 HTML fetch。

基本上，當請求新頁面 HTML 時，我們需要實現 3 個承諾。

1. 開始動畫完成。
2. 獲取新頁面 HTML 完成。
3. 停止動畫完成。

 var page = document.querySelector('.page'); var loadingText = document.querySelector('.transition__loding'); var frameBlack = document.querySelector('.page-transition__black'); var frameRed = document.querySelector('.page-transition__red'); var button = document.querySelector('#button'); var startLoadingPromise; var stopLoadingPromise; var startLoadingAnimation = new TimelineMax({ paused: true, onComplete: startLoadingComplete }) .fromTo(frameRed, 2.2, { scaleX: 0 }, { scaleX: 1, transformOrigin: 'left', ease: Power4.easeInOut }) .fromTo(frameBlack, 2.2, { scaleX: 0 }, { scaleX: 1, transformOrigin: 'left', ease: Power4.easeInOut }, .2) .fromTo(loadingText, 1.6, { xPercent: -100, autoAlpha: 0 }, { xPercent: 0, autoAlpha: 1, ease: Power4.easeInOut }, .7); var stopLoadingAnimation = new TimelineMax({ paused: true, onComplete: stopLoadingComplete }) .set(frameRed, { scaleX: 0 }) .to(frameBlack, 2.2, { scaleX: 0, transformOrigin: 'right', ease: Power4.easeInOut }) .to(loadingText, .2, { autoAlpha: 0 }, '-=1.2'); button.addEventListener('click', () => { button.style.display = 'none'; startLoading().then(function() { return getPageAsync(); }).then(function(html) { page.innerHTML = html; return stopLoading(); }).then(function() { button.style.display = 'initial'; }) }); function getPageAsync() { return new Promise(function(resolve, reject) { setTimeout(function() { resolve(getRandomContent()); }, 500); }); } function getRandomContent() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (var i = 0; i < 30; i++) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } function startLoadingComplete() { startLoadingPromise.resolve(); } function startLoading() { let res, rej; startLoadingPromise = new Promise(function(resolve, reject) { res = resolve; rej = reject; }); startLoadingPromise.resolve = res; startLoadingPromise.reject = rej; startLoadingAnimation.play(0); return startLoadingPromise; } function stopLoadingComplete() { stopLoadingPromise.resolve(); } function stopLoading() { let res, rej; stopLoadingPromise = new Promise(function(resolve, reject) { res = resolve; rej = reject; }); stopLoadingPromise.resolve = res; stopLoadingPromise.reject = rej; stopLoadingAnimation.play(0); return stopLoadingPromise; }

 body { overflow: hidden; } .page-transition__black { position: absolute; left: 0; top: 0; height: 100vh; width: 100vw; background: #000; } .page { background-color: green; position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: white; font-size: 30px; text-align: center; padding-top: 20px; } .page-transition__red { position: absolute; left: 0; top: 0; height: 100vh; width: 100vw; background: red; } .transition__loding { text-transform: uppercase; font-family: sans-serif; font-size: 32px; position: absolute; z-index: 1; color: #fff; font-weight: bold; top: 50vh; left: 50vw; transform: translate(-50%, -50%); } button { bottom: 15vh; left: 5vw; text-transform: uppercase; font-family: sans-serif; font-size: 16px; position: absolute; z-index: 1; color: #fff; background: transparent; padding: 20px; border: 2px solid #fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <div class="page-transition"> <div class="page"> Page 1 content ... </div> <div class="page-transition__red"></div> <div class="page-transition__black"></div> <div class="transition__loding"> Loading ...</div> </div> <button id="button">Next Page</button>