Javascript 制作背景幻灯片动画

我制作了一个按钮组，当用户选择上一个或下一个按钮移动/滑动的每个按钮背景时，我用纯

css

制作了这个效果，并使用

jquery

添加或删除

活动的
类。现在的问题是当你点击
All
按钮，然后点击
New
它就可以正常工作了，但是如果你点击
Used
幻灯片的位置不正确

为此，我使用了
transition
和
：：在
之前，需要使用纯
css
或最小jquery来解决这个问题，而不是大量的
javascript
或
jquery
代码

移动此背景的逻辑是：

.RadioButton .btn:first-child::before {
 right: 0;
 transition: .3s all ease;
}

.RadioButton .btn:nth-child(2)::before {
 transition: .3s all ease;
}

.RadioButton .btn:last-child::before {
  left: 0;
  transition: .3s all ease;
}

.RadioButton.btn:n子项（2）上的问题：在
之前，我不能使用
右：0
或
左：0
，因为如果我使用每一个，滑动效果无法在正确的位置工作，有解决方案吗

到目前为止，我尝试的是：


$（'.RadioButton'）。每个（函数（）{
$（this）.find（'.btn'）.each（function（）{
$（此）。单击（函数（）{
$（this.parent（）.find（'.btn'）.removeClass（'btn-active'）；
$（this.addClass（'btn-active'）；
});
});
});
正文{
方向：rtl；
}
.RadioButton.btn{
宽度：33%；
浮动：左；
保证金：0；
框大小：边框框；
位置：相对位置；
字体大小：11px；
最小高度：30px！重要；
线高：30px；
边界半径：5px；
溢出：隐藏；
光标：指针；
文本对齐：居中；
}
.btn默认值{
边框：1px纯色灰色；
颜色：灰色；
}
.btn组>.btn:第一个孩子{
边框右上角半径：0；
边框右下半径：0；
}
.btn组>.btn:第n个子项（2）{
边界半径：0；
}
.btn组>.btn:最后一个子级{
边框左上半径：0；
边框左下半径：0；
}
.RadioButton.btn:：之前{
内容：“；
身高：100%；
宽度：0%；
背景：灰色；
位置：绝对位置；
排名：0；
过渡：一切都很轻松；
z指数：-1；
}
.btn活动：：之前{
宽度：100%！重要；
}
.RadioButton.btn:n第n个子项（2）：：之前{
右：0；
过渡：一切都很轻松；
}
.RadioButton.btn:最后一个子项：：之前{
左：0；
过渡：一切都很轻松；
}
.btn活动：第一个子项：：之前{
左：0；
过渡：一切都很轻松；
}
.btn活动：最后一个子项：：之前{
左：0；
过渡：一切都很轻松；
}
.btn.btn-default.btn-active{
颜色：白色；
}
.btn组{
明确：两者皆有；
边缘顶部：10px；
}

使用
新的
全部的
更改位置中心


$（'.RadioButton'）。每个（函数（）{
$（this）.find（'.btn'）.each（function（）{
$（此）。单击（函数（）{
$（this.parent（）.find（'.btn'）.removeClass（'btn-active'）；
$（this.addClass（'btn-active'）；
});
});
});
正文{
方向：rtl；
}
.RadioButton.btn{
宽度：33%；
浮动：左；
保证金：0；
框大小：边框框；
位置：相对位置；
字体大小：11px；
最小高度：30px！重要；
线高：30px；
边界半径：5px；
溢出：隐藏；
光标：指针；
文本对齐：居中；
}
.btn默认值{
边框：1px纯色灰色；
颜色：灰色；
}
.btn组>.btn:第一个孩子{
边框右上角半径：0；
边框右下半径：0；
}
.btn组>.btn:第n个子项（2）{
边界半径：0；
}
.btn组>.btn:最后一个子级{
边框左上半径：0；
边框左下半径：0；
}
.RadioButton.btn:：之前{
内容：“；
身高：100%；
宽度：0%；
背景：灰色；
位置：绝对位置；
排名：0；
过渡：一切都很轻松；
z指数：-1；
左：50%；
转化：translateX（-50%）；
}
.btn活动：：之前{
宽度：100%！重要；
}
.RadioButton.btn:n第n个子项（2）：：之前{
过渡：一切都很轻松；
}
.RadioButton.btn:最后一个子项：：之前{
过渡：一切都很轻松；
}
.btn活动：第一个子项：：之前{
过渡：一切都很轻松；
}
.btn活动：最后一个子项：：之前{
过渡：一切都很轻松；
}
.btn.btn-default.btn-active{
颜色：白色；
}
.btn组{
明确：两者皆有；
边缘顶部：10px；
}

使用
新的
全部的
在最后一个按钮上，在pseudo之后只设置一个。
现在，使用同级选择器和活动类将其移动到左侧（视情况而定）。（请参见CSS中的最后两种样式）


$（'.RadioButton'）。每个（函数（）{
$（this）.find（'.btn'）.each（function（）{
$（此）。单击（函数（）{
$（this.parent（）.find（'.btn'）.removeClass（'btn-active'）；
$（this.addClass（'btn-active'）；
});
});
});
正文{
方向：rtl；
}
.RadioButton.btn{
宽度：33%；
浮动：左；
保证金：0；
框大小：边框框；
位置：相对位置；
字体大小：11px；
最小高度：30px！重要；
线高：30px；
边界半径：5px；
光标：指针；
文本对齐：居中；
}
.btn默认值{
边框：1px纯色灰色；
颜色：灰色；
}
.btn组>.btn:第一个孩子{
边框右上角半径：0；
边框右下半径：0；
}
.btn组>.btn:第n个子项（2）{
边界半径：0；
}
.btn组>.btn:最后一个子级{
边框左上半径：0；
边框左下半径：0；
}
.btn.btn-default.btn-active{
颜色：白色；
}
.btn组{
明确：两者皆有；
边缘顶部：10px；
}
.RadioButton.btn:n子项（3）：：之前{
内容：“；
身高：100%；
宽度：100%；
背景：灰色；
位置：绝对位置；
排名：0；
过渡：一切都很轻松；
z指数：-1；
左：0px；
}
.btn活动：第一个子项~.btn:：之前{
转化：translateX（计算（-4px-200%）；
}
.btn活动：第n个子项（2）~.btn:：之前{
转化：translateX（计算（-2px-100%）；
}

使用
新的
全部的
效果不正确，我想将背景（带幻灯片动画）移动到下一个或上一个位置，具体取决于单击的位置。（在我的代码段上，从右到左，依次单击第一个按钮、中间按钮和左按钮）。我想要这个效果。