Javascript CSS：数组中元素之间的平滑转换

我有这个阵列：

myArr=[1,2,3,4]

此数组中的第一个元素将显示在屏幕上

有两个按钮（左和右）。它们触发向前或向后移动阵列中元素的函数：

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

结果是：

myArr=[2,3,4,1]

现在元素2显示在屏幕上

这种方法不幸的副作用是，很难为旧元素到新元素的过渡设置动画

我尝试使用

关键帧

，但动画没有那么平滑（而且我缺乏经验）

您可以在此处找到我的安装程序的通用版本：

我想要的结果是：

从第一个元素到第二个元素的平滑过渡。很像任何普通的旋转木马（选择你最喜欢的CSS框架）

如果需要，我们乐意提供更多信息

---

谢谢，

您可以有一个生成和删除节点的覆盖层来触发动画，还有一个

设置计时器来在动画完成后更改参考底图值

注意：堆栈溢出代码段当前不支持
scs
，请参阅我的


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（“覆盖”）；
设prevEle=document.querySelector（“.number”）；
设禁用=假；
left.addEventListener（“单击”，函数（）{
如果（禁用）返回；
运动（“左”，arr）；
});
右。addEventListener（“单击”，函数（）{
如果（禁用）返回；
运动（“右”，arr）；
});
//document.addEventListener（“DOMContentLoaded”，函数（）{
//setupUI（）；
// });
函数createNew（）{
设ele=document.createElement（“div”）；
ele.classList.add（“编号”）；
ele.classList.add（“fadeIn”）；
ele.innerText=arr[0]；
返回ele；
}
函数setupUI（）{
禁用=真；
设newEle=createNew（）；
overlay.removeChild（overlay.firstChild）；
叠加预处理（newEle）；
setTimeout（（）=>disabled=false，350）；
setTimeout（（）=>prevEle.innerText=arr[0]，350）；
}
功能移动（方向、阵列）{
如果（方向=“右”）{
var元素=array.shift（）；
array.push（元素）；
}否则{
var element=array.pop（）；
数组。取消移位（元素）；
}
setupUI（）；
}
*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
高度：100vh；
背景：rgb（250175170）；
显示：网格；
网格模板柱：1fr 1fr；
网格模板行：2fr 1fr；
.号码{
网格柱：1/-1；
游标：默认值；
}
法丹先生{
动画：fadeIn ease.5s；
-webkit动画：fadeIn ease.5s；
-moz动画：fadeIn ease.5s；
-o-动画：fadeIn ease.5s；
-ms动画：fadeIn ease.5s；
}
@关键帧淡入淡出{
0%{不透明度：0；}
100%{不透明度：1；}
}
}
.覆盖{
位置：绝对位置；
宽度：100vw；
高度：100vh；
指针事件：无；
.号码{
背景：rgb（250175170）；
}
.集装箱{
背景：透明；
}
}
.号码{
保证金：自动；
字号：25em；
}
.btn{
保证金：自动；
边框：纯色2px黑色；
填料：1米2米；
边界半径：5px；
过渡：所有0.5s缓解；
光标：指针；
&：悬停{
背景：黑色；
颜色：白色；
}
}

1.
左边
赖特