时间戳

首页 > 解决方案 > 调整拨动开关以实现平滑转换和颜色变化

javascript - 调整拨动开关以实现平滑转换和颜色变化

问题描述

我正在尝试使切换按钮像 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>

标签： javascripthtmlcsstoggle

解决方案

我已经弄清楚了一部分。您正在使用两个单独的项目进行过渡。相反，使用一个。将它们放在同一个标​​签下。此外，将过渡添加到正在滑动的跨度。使按钮的不透明度为 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>

推荐阅读