CSS：數組中元素之間的平滑過渡

Question

我有這個數組：

myArr = [1, 2, 3, 4]

此數組中的第一個元素顯示在屏幕上。

有兩個按鈕（左和右）。 它們觸發將數組中的元素向前或向后移動的函數：

shiftLeft() {
   var firstElement = myArr.shift()
   myArr.push(firstElement)
}

結果： myArr = [2, 3, 4, 1]現在元素2出現在屏幕上。

這種方法的不幸副作用是很難為舊元素到新元素的過渡設置動畫。

我嘗試使用keyframes ，但 animation 沒有那么流暢（而且我缺乏經驗）。

您可以在此處找到我的設置的通用版本： https://codepen.io/riza-khan/pen/KKVyaaR

我正在尋找的結果：

從第一個元素到第二個元素的平滑過渡。 就像任何通用輪播一樣（選擇您最喜歡的 CSS 框架）。

如果需要，很樂意提供更多信息。

謝謝，

Answer 1

您可以有一個覆蓋層來生成和刪除節點以觸發 animation，並使用setTimer在 animation 完成后更改底層值。

注意： Stack Overflow 代碼段目前不支持scss ，請參閱我的codepen 此處。

 const arr = [1, 2, 3, 4]; const left = document.querySelector(".left"); const right = document.querySelector(".right"); const container = document.querySelector(".container"); const overlay = document.querySelector("#overlay"); let prevEle = document.querySelector(".number"); let disabled = false; left.addEventListener("click", function() { if (disabled) return; movement("left", arr); }); right.addEventListener("click", function() { if (disabled) return; movement("right", arr); }); // document.addEventListener("DOMContentLoaded", function () { // setupUI(); // }); function createNew() { let ele = document.createElement("div"); ele.classList.add("number"); ele.classList.add("fadeIn"); ele.innerText = arr[0]; return ele; } function setupUI() { disabled = true; let newEle = createNew(); overlay.removeChild(overlay.firstChild); overlay.prepend(newEle); setTimeout(() => disabled = false, 350); setTimeout(() => prevEle.innerText = arr[0], 350); } function movement(direction, array) { if (direction === "right") { var element = array.shift(); array.push(element); } else { var element = array.pop(); array.unshift(element); } setupUI(); }

 * { margin: 0; padding: 0; box-sizing: border-box; }.container { height: 100vh; background: rgb(250,175,170); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; .number { grid-column: 1 / -1; cursor: default; }.fadeIn { animation: fadeIn ease.5s; -webkit-animation: fadeIn ease.5s; -moz-animation: fadeIn ease.5s; -o-animation: fadeIn ease.5s; -ms-animation: fadeIn ease.5s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } }.overlay { position: absolute; width: 100vw; height: 100vh; pointer-events: none; .number { background: rgb(250,175,170); }.container{ background: transparent; } }.number { margin: auto; font-size: 25em; }.btn { margin: auto; border: solid 2px black; padding: 1em 2em; border-radius: 5px; transition: all 0.5s ease; cursor: pointer; &:hover { background: black; color: white; } }

 <div class="overlay"> <div class="overlay container" id="overlay"> </div> </div> <div class="container"> <div class="number">1</div> <button class="btn left">Left</button> <button class="btn right">Right</button> </div>