Javascript 盒顺序动画

我有一组按行排序的框，每个框都有它的值和背景色。最后，长方体改变了它的位置，我想给它设置动画

这就是我能够做的下面的代码或（），这很好，但是当我再添加5个框（需要6个）时，动画（转换）有时会跳过自身，框就会弹出到那个地方

函数洗牌（a）{
对于（设i=a.length-1；i>0；i--）{
常数j=数学楼层（数学随机（）*（i+1））；
[a[i]，a[j]=[a[j]，a[i]]；
}
返回a；
}
常数框颜色={
1:“红色”，
2:“蓝色”，
3:“绿色”，
4:“黑色”，
5:“橙色”，
6:“黄色”
};
类应用程序扩展了React.Component{
状态={
价值：[1]
}
componentDidMount=（）=>{
设置间隔（（）=>{
让newArr=shuffle（this.state.value）
this.setState（{value:newArr}）
}, 2000);
}
render（）{
让order=this.state.value.map（（BoxValue，BoxOrder）=>{//BoxOrder是框的位置
让classColor=BOX_COLOR[BoxValue]；//因为每个数字都有不同的颜色
让classOrder=null；//这应该指示该框的位置
让randomPosition=Math.floor（Math.random（）*6）+1//生成随机框位置
开关（随机位置）{
案例1：
classOrder=“第一”；
打破
案例2：
classOrder=“第二”；
打破
案例3：
classOrder=“第三”；
打破
案例4：
classOrder=“第四”；
打破
案例5：
classOrder=“第五”；
打破
案例6：
classOrder=“第六”；
打破
违约：
打破
}
返回(
{BoxValue}
);
});
返回(
{顺序}
)
}
}
ReactDOM.render（，document.getElementById（'app'））
.container{
边框：5px实心#666；
高度：100px；
宽度：600px；
显示器：flex；
位置：相对位置；
}
.盒子{
边框：5px实心#999；
背景：红色；
宽度：100px；
身高：100%；
填充：20px；
字体大小：50px；
文本对齐：居中；
颜色：白色；
位置：绝对位置；
转换：转换700ms易入易出；
左：0；
排名：0；
框大小：边框框；
}
瑞德先生{
背景：红色；
}
蓝先生{
背景：蓝色；
}
格林先生{
背景：绿色；
}
布莱克先生{
背景：黑色；
}
.橙色{
背景：橙色；
}
黄先生{
背景：黄色；
}
.首先{
变换：translateX（0）；
}
.第二{
转换：translateX（100px）；
}
.第三{
转换：translateX（200px）；
}
.第四{
转换：translateX（300px）；
}
.第五{
转换：translateX（400px）；
}
.第六{
转换：translateX（500px）；
}
我认为您将
BoxValue
用作
BoxOrder
，反之亦然。只需在渲染方法中使用它们的位置进行切换。
将
BoxValue
替换为
BoxOrder+1
，并将
BoxOrder+1
替换为
BoxValue
。（我想在3个地方，我添加了评论）

请参见下面的代码段：


函数洗牌（a）{
对于（设i=a.length-1；i>0；i--）{
常数j=数学楼层（数学随机（）*（i+1））；
[a[i]，a[j]=[a[j]，a[i]]；
}
返回a；
}
常数框颜色={
1:“红色”，
2:“蓝色”，
3:“绿色”，
4:“黑色”，
5:“橙色”，
6:“黄色”
};
类应用程序扩展了React.Component{
状态={
值：[1,2,3,4,5,6]
}
componentDidMount=（）=>{
设置间隔（（）=>{
让newArr=shuffle（this.state.value）
this.setState（{value:newArr}）
}, 2000);
}
render（）{
让order=this.state.value.map（（BoxValue，BoxOrder）=>{//BoxOrder是框的位置
让classColor=BOX_COLOR[BoxOrder+1]；//因为每个数字都有不同的颜色
//将BoxValue更改为BoxOrder+1
让classOrder=null；//这应该指示该框的位置
让randomPosition=Math.floor（Math.random（）*6）+1//生成随机框位置
开关（BoxValue）{//将BoxOrder+1更改为BoxValue
案例1：
classOrder=“第一”；
打破
案例2：
classOrder=“第二”；
打破
案例3：
classOrder=“第三”；
打破
案例4：
classOrder=“第四”；
打破
案例5：
classOrder=“第五”；
打破
案例6：
classOrder=“第六”；
打破
违约：
打破
}
返回(
{BoxOrder+1}
);
//将BoxValue更改为BoxOrder+1
});
返回(
{顺序}
)
}
}
ReactDOM.render（，document.getElementById（'app'））
.container{
边框：5px实心#666；
高度：100px；
宽度：600px；
显示器：flex；
位置：相对位置；
}
.盒子{
边框：5px实心#999；
背景：红色；
宽度：100px；
身高：100%；
填充：20px；
字体大小：50px；
文本对齐：居中；
颜色：白色；
位置：绝对位置；
转换：转换700ms易入易出；
左：0；
排名：0；
框大小：边框框；
}
瑞德先生{
背景：红色；
}
蓝先生{
背景：蓝色；
}
格林先生{
背景：绿色；
}
布莱克先生{
背景：黑色；
}
.橙色{
背景：橙色；
}
黄先生{
背景：黄色；
}
.首先{
变换：translateX（0）；
}
.第二{
转换：translateX（100px）；
}
.第三{
转换：translateX（200px）；
}
.第四{
转换：translateX（300px）；
}
.第五{
转换：translateX（400px）；
}
.第六{
转换：translateX（500px）；
}

我在FF64.0上试用了你的代码笔，无法复制，你使用的是哪种浏览器？嗯…Chrome（71.0.3578.98版）我也看不到任何问题，除非你的问题是在填充两个白色字段之前，两个字段相邻？当然，b