當我點擊下一個按鈕時，上一個問題必須用反向 animation 刪除，下一個問題必須顯示輸入效果 animation

Question

我希望當我單擊下一個按鈕時，必須使用反向 animation 效果刪除上一個問題，下一個問題必須以打字效果 animation 顯示，與下一次單擊相同..，下一次單擊...必須遵循 smae 步驟。 任何人都可以使用此代碼提供幫助：我的 coide 無法正常工作。 請幫助我:) 提前謝謝。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <style>.rks1 { font-weight: 900; font-size: 2.5em; font-family: rr; }.rks1.letter { display: inline-block; line-height: 1em; }.word { white-space: nowrap; }.span { } </style> <div id="questions"> <div id="q0" class="rks1"> <h3>1. The color of the sky is...? </h3> </div> <div id="q1" class="rks1" style="display: none"> <h3>2. Paper comes from...? </h3> </div> <div id="q2" class="rks1" style="display: none"> <h3>3. How many hours in a day? </h3> </div> </div> <br> <br> <button onclick="next()">Next Question</button> <script type="text/javascript"> var textWrappers = document.querySelectorAll('.rks1'); textWrappers.forEach(textWrapper => { textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => { return `<span class="word">` + m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") + `</span>`; }); }); var targets = Array.from(document.querySelectorAll('.rks1.letter')); anime.timeline({ loop: true, }).add({ targets: targets, scale: [3, 1], scaleY: [1.5, 1], opacity: [0, 1], translateZ: 0, easing: "easeOutExpo", duration: 400, delay: (el, i) => 60 * i }).add({ targets: targets.reverse(), scale: [1,3], scaleY: [1,1.5], opacity: [1,0], translateZ: 0, easing: "easeOutExpo", duration: 100, delay: (el, i) => 30*i }).add({ opacity: 0, duration: 1000, easing: "easeOutExpo", delay: 100 }) </script> <script> var showing = [1, 0, 0]; var questions = ['q0', 'q1', 'q2']; function next() { var qElems = []; for (var i = 0; i < questions.length; i++) { qElems.push(document.getElementById(questions[i])); } for (var i = 0; i < showing.length; i++) { if (showing[i] == 1) { qElems[i].style.display = 'none'; showing[i] = 0; if (i == showing.length - 1) { qElems[0].style.display = 'block'; showing[0] = 1; } else { qElems[i + 1].style.display = 'block'; showing[i + 1] = 1; } break; } } } </script>

Answer 1

您的 animation 代碼只需要以下內容，因為您可以使用animejs的反向時間線功能：

var anim = anime.timeline()
  .add({
    targets: targets,
    scale: [3, 1],
    scaleY: [1.5, 1],
    opacity: [0, 1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 400,
    delay: (el, i) => 60 * i
  })

下面是運行下一個function 后反向 animation 的示例。 animation 完成后，還使用 promise。

function next() {
  anim.reverse();
  anim.complete = () => {
    // next question...
  };     
}

您可以在此回調中繼續您的邏輯以加載您的下一個問題。

---

最終結果，稍微整理一下

 var question = 0, questions = [ "The color of the sky is...?", "Paper comes from...?", "How many hours in a day?"]; var anim, targets; function prepQuestion() { $("#questions").text(questions[question]); var textWrappers = document.querySelectorAll('#questions'); textWrappers.forEach(textWrapper => { textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => { return `<span class="word">` + m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") + `</span>`; }); }); targets = Array.from(document.querySelectorAll('#questions.letter')); anim = anime.timeline().add({ targets: targets, scale: [3, 1], scaleY: [1.5, 1], opacity: [0, 1], translateZ: 0, easing: "easeOutExpo", duration: 400, delay: (el, i) => 60 * i }); } // init prepQuestion(); function next() { anim = anime.timeline().add({ targets: targets.reverse(), scale: [1,3], scaleY: [1,1.5], opacity: [1,0], translateZ: 0, easing: "easeOutExpo", duration: 100, delay: (el, i) => 30 * i }); anim.complete = () => { if (question == questions.length - 1) { question = 0; } // reset question else { question++; } prepQuestion(); }; }

 #questions { font-weight: 900; font-size: 2.5em; font-family: rr; } #questions.letter { display: inline-block; line-height: 1em; }.word { white-space: nowrap; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="questions"></div> <button onclick="next()">Next Question</button>

當然這只是一個粗略的想法和稍微不同的方法。