Javascript 使用动画创建分段控件

我有一个相当简单的分段控制器，比如单选按钮设置。当选中单选按钮时，该按钮将应用背景色

如何在css中获得要为选定单选按钮设置动画的背景色

像这样：

输入{
显示：无；
}
输入：选中+标签{
背景颜色：黄绿色；
}

第一选择
第二次手术
第三种选择

可能需要进行一些调整，以使其看起来合适，但总体思路如下：

输入{
显示：无；
}
#rdb1:已选中~#返回{
左：0！重要；
}
#rdb2:已选中~#返回{
左：15vw！重要；
}
#rdb3:已选中~#返回{
左：30vw！重要；
}
标签{
宽度：15vw；
浮动：左；
}
#背{
背景颜色：黄绿色；
左：0；
位置：固定；
宽度：15vw；
高度：12磅；
z指数：-1；
过渡：左500ms
}

第一选择
第二次手术
第三种选择

这里有些东西

标签{
位置：相对位置；
身高：100%；
显示：块；
高度：50px；
}
[type=“radio”]{
显示：无；
z指数：5；
位置：相对位置；
}
[type=“radio”]~span{
过渡：背景。3s；
身高：100%；
显示：-webkit flex；
显示器：flex；
-webkit内容：中心；
证明内容：中心；
-webkit对齐项目：居中；
对齐项目：居中；
填充：0 25px；
z指数：5；
位置：相对位置；
}
.bg{
位置：绝对位置；
宽度：100%；
身高：100%；
背景：7df5a7；
排名：0；
z指数：0；
左：0；
宽度：0；
过渡区：3s宽度；
}
标签：第n个孩子（1）.bg{
右：0；
左：自动；
}
标签：第n个孩子（2）.bg{
左：0；
}
[type=“radio”]：选中+.bg{
宽度：100%；
}
.包裹{
边框：1px实心#ddd；
显示：内联flex；
溢出：隐藏；
边界半径：50px；
}

第一选择
第二种选择

好吧，纯CSS，看来我回来晚了，还是比不回来好，（1）（2）

更新代码：将z-index值添加到容器div#radios（3）

正文{
背景：#EEE url（'//www.dailyfreepsd.com/wp content/uploads/2013/09/underwater fuzzle background.jpg'）；
背景尺寸：封面；
}
#收音机{
位置：相对位置；
背景色：番茄；
z指数：5；
宽度：363px；
}
输入{
显示：无；
}
#bckgrnd，
.标签{
宽度：120px；
高度：30px；
文本对齐：居中；
显示：内联块；
填充顶部：10px；
右边距：-3px；
z指数：2；
光标：指针；
外形：1px纯绿色；
}
#bckgrnd{
背景颜色：橙色；
位置：绝对位置；
左：0；
排名：0；
z指数：-1；
}
#rad1:选中~#bckgrnd{
变换：translateX（0）；
过渡：0.5s缓进缓出转换；
}
#rad2:已选中#bckgrnd{
转换：translateX（120px）；
过渡：0.5s缓进缓出转换；
}
#rad3:已选中#bckgrnd{
转化：translateX（241px）；
过渡：0.5s缓进缓出转换；
}

第一选择
第二种选择
第三种选择

[l1，l2，l3].forEach（函数（x）{
x、 onclick=function（）{
var r=x.getBoundingClientRect（）；
bg.style.left=r.left-12+“px”；
bg.style.top=r.top-10+“px”；
bg.style.width=r.width+8+“px”；
bg.style.height=r.height+4+“px”；
};
});
l1.onclick（）
#容器{位置：相对；}
输入[type=“radio”]{display:none；}
输入[type=“radio”]+标签{显示：内联块；}
#背景色：#0F0；
位置：绝对位置；
过渡：所有0.25秒缓进缓出；
边界半径：1000px；
z索引：-1；}

选择1
选择2
选项3包含很长的文本
这是一个使用JQuery的版本。这比其他答案稍微复杂一点，但大部分的复杂性是由于我制作动画的方式。当高光更改时，它会拉伸到新位置，然后收缩以适应。这不是你的模型所做的，但我认为这是一个更平滑的效果

这很难解释，但这里有一个JSFiddle可以说明我的意思


HTML与您的HTML几乎相同，只是添加了突出显示：

<div>
    <label>
        <input type="radio" name="radioBtn" ><span class="label">First Option</span>
    </label>
    <label>
        <input type="radio" name="radioBtn" checked><span class="label">Second Option</span>
    </label>
    <label>
        <input type="radio" name="radioBtn"><span class="label">Third Option with a long label</span>
    </label>
    <span class="highlight"></span>
</div>

最重要的CSS样式是使用适当的缓和和延迟量应用过渡的样式：

span.highlight.grow-left {
    transition: left 0.2s ease-in-out, width 0.2s ease-in-out;

}

span.highlight.grow-right {
    transition: width 0.2s ease-in-out, left 0.2s ease-in-out 0.2s;

}

span.highlight.shrink {
    transition: width 0.2s ease-in-out, left 0.2s ease-in-out;
}

其要点是标签后面有一个“亮点”。当你点击一个按钮时，它会计算你点击的那个按钮的位置，通过添加类在正确的时间应用正确的动画，你会得到正确的动画“变形”
这里有一个很好的教程：@Nathanleung，用于打开和关闭按钮。我想要分段控制，就像这是你的目标吗？那一个有JS代码，没有
javascript
标记在OP@AndrewBone这正是我想要的动画。我更喜欢保持事情的简单，并以它应该使用的方式使用布局选项。（例如，如果我要制作一个实际的表格，我会使用
table
和
td
），但我真的很喜欢你为它制作动画的方式！）谢谢你的回答。我喜欢，但这并不完美。例如，调整窗口大小时，背景色将随之设置动画。我更新了这个问题。你可以使用静态值而不是vw值，这将解决大小调整问题谢谢你的回答！
~
到底是做什么的？这是CSS中的一般同级选择器这对两个以上的选项都不起作用，根据问题中的图像，我们可以假设OP希望能够使用两个以上的选项（至少没有一些js或大量的调整），但仍然很有吸引力；）谢谢你的回答！真的很喜欢！为什么我们需要
利润权：-3px？欢迎光临，
页边距右侧：-3实验室之间有一个很小的差距
span.highlight.grow-left {
    transition: left 0.2s ease-in-out, width 0.2s ease-in-out;

}

span.highlight.grow-right {
    transition: width 0.2s ease-in-out, left 0.2s ease-in-out 0.2s;

}

span.highlight.shrink {
    transition: width 0.2s ease-in-out, left 0.2s ease-in-out;
}