如何一次使用 translateY 到連續的顯示元素？

Question

最終，對於每次單擊按鈕，我想顯示一個包含新內容的元素。 換句話說...

• 您閱讀了包含在父容器中的內容
• 要查看下一個項目，請單擊按鈕
• 單擊按鈕時，舊內容會向下移動。 新內容從容器頂部向下流動。 它暫停以閱讀新內容。
• 要獲取新內容，請再次按下按鈕。

我不清楚如何實現這一點，以及是否可以使用CSS Animation。 根據我發布的內容，它只需要兩個元素並立即將它們沿垂直軸平移。 如何重構它，以便一個元素暫停並僅使用vanilla JavaScript顯示其內容？

 var div1 = document.querySelector(".first"); var div2 = document.querySelector(".second"); var button = document.querySelector("button"); var divs = [div1, div2]; button.addEventListener("click", function(event) { event.preventDefault(); for (var i = divs.length - 1; i > -1; i--) { var div = divs[i]; div.classList.remove("down_shift"); void div.offsetWidth; div.classList.add("down_shift"); } });

 body { background: #222; } section { width: 50vw; height: 300px; border: 5px solid red; margin: 50px auto; overflow: hidden; }.first, .second { width: inherit; height: 300px; background: red; transform: translateY(-300px); }.second { background: pink; } h1 { margin: 0; padding-top: 50px; text-align: center; }.down_shift { animation: down 1s ease-out; } @keyframes down{ from { transform: translateY(0); } to { transform: translateY(300px); } }

 <section> <div class="first"><h1>1</h1></div> <div class="second"><h1>2</h1></div> </section> <button type="button">Click</button>

Answer 1

您可以為元素添加包裝器，並為包裝器設置動畫

 var wrapper = document.querySelector(".wrapper"); var button = document.querySelector("button"); button.addEventListener("click", function(event) { event.preventDefault(); wrapper.style.transform = 'translateY(-300px)' });

 body { background: #222; } section { width: 50vw; height: 300px; border: 5px solid red; margin: 50px auto; overflow: hidden; }.first, .second { width: inherit; height: 300px; background: red; /* transform: translateY(-300px); */ }.second { background: pink; }.wrapper { transition: all 1s ease-out; } h1 { margin: 0; padding-top: 50px; text-align: center; }.down_shift { animation: down 1s ease-out; } @keyframes down{ from { transform: translateY(0); } to { transform: translateY(300px); } }

 <section> <div class="wrapper"> <div class="first"><h1>1</h1></div> <div class="second"><h1>2</h1></div> </div> </section> <button type="button">Click</button>