javascript - 在平滑传输和颜色变化中调整拨动开关

Question

我正在尝试使切换按钮像 IOS 开关切换一样平滑过渡。当切换打开时，我还尝试将#bounds 的边框颜色更改为绿色。

#bounds {
    padding:2px;
    transition: all .2s ease;
    border: 4px solid #ececec;
    border-radius: 2em;
    overflow:auto;
    float:left;
    color: transparent;
}

#bounds label {
    float:left;
    width:2.0em;
}

#bounds label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#bounds label input {
    position:absolute;
    top:-20px;
}

#bounds input:checked + span {
    background-color:#404040;
    color: transparent;
}

#bounds label.on input:checked + span {
    background: #7FC6A6;
    color: transparent;
  border-radius: 1em;
}

#bounds label.off input:checked + span {
    background: #ececec;
    color: transparent;
  border-radius: 1em;
}

<div id="bounds">
    <label class="on"><input type="radio" name="toggle"><span>On</span></label>
    <label class="off"><input type="radio" name="toggle" checked><span>Off</span></label>
</div>

Answer 1

我已经弄清楚了其中的一部分。您正在使用两个单独的元素进行过渡。相反，使用一个。把它们放在同一个标​​签下。此外，将过渡添加到正在滑动的跨度。使按钮的不透明度为 0，并使它们占据整个标签的大小。选中按钮后，将其设置为 display : none。另一个将取代它的位置。此外，由于它们占据了整个容器的大小，因此无论您在何处单击都无关紧要。

更新修好了:D

#bounds {
  padding:2px;
  transition: all .2s ease;
  border: 4px solid #ececec;
  border-radius: 2em;
  overflow:auto;
  float:left;
  color: transparent;
}

#bounds label {
  float:left;
  width: 4.0em;
  height: 2.0em;
}

#bounds label span {
  text-align:center;
  display:block;
  background : #7FC6A6;
  width: 2.25em;
  height:2em;
  border-radius : 20px;
  transition : 350ms all;
}

#bounds label input {
  position:absolute;
    width: 4.0em;
    height: 2.0em;
  opacity: 0;
}

#bounds label input.off:checked + span {
  background-color:#404040;
  color: transparent;
  margin-left : 1.75em;
}

#bounds label input.off:checked
{
  display : none;
}

#bounds label input.on:checked + span {
  background: #7FC6A6;
  color: transparent;
  border-radius: 1em;
  float: left;
  margin-left : 0;
}

#bounds label input.on:checked
{
  display : none;
}

<div id="bounds">
  <label>
    <input class="on" type="radio" name="toggle" >         
    <input class="off" type="radio" name="toggle" checked>
    <span></span>
  </label>
</div>