调整平稳过渡和颜色变化的切换开关

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>

- DigiNet Events

---

你是否使用任何类型的CSS预处理器？ - Eddie D

不用，只需要这段代码。 - DigiNet Events

已经修复了，看看我的代码。 - Eddie D

通常情况下，“开”按钮在用户界面上是放在右边的，这只是我的个人意见。 - DagicCross

太棒了，它正如我所期望的那样工作 :) - DigiNet Events

@DigiNet 事件，但您还想更改边框颜色，但这并不起作用 :) - Observer

Answer 1

我已经理解其中一部分了。你正在使用两个单独的项目进行过渡。相反，使用一个项目。将它们放在同一个标签下。此外，向正在滑动的span添加过渡效果。使按钮不透明，并使其占据标签的整个大小。当一个按钮被选中时，你把它设置为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>

- Eddie D

Answer 2

使用JavaScript切换一个标签而不是两个。此外，删除了浮动部分并进行了过渡：

HTML：

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

JavaScript：

$("#bounds").on("click", function(){
    if ($(this).find('label').hasClass('off')) {
    $(this).find('label').removeClass('off');
    $(this).find('label').addClass('on');
    $(this).addClass('active');
  } else {
    $(this).find('label').removeClass('on');
    $(this).find('label').addClass('off');
    $(this).removeClass('active');
  }  
  return false;
});

CSS：

#bounds {
    padding:2px;    
    border: 4px solid #ececec;
    border-radius: 2em;
    overflow:auto;
    float:left;
    color: transparent;
    width:4em;
    height: 24px;
}

#bounds.active {
  border-color: #7FC6A6;
  transition: all 1s ease-in-out;
}

#bounds label, #bounds span {
    width:2.0em;
}

#bounds label.off span {
    transform: translateX(100%);
    transition: all 1s ease-in-out;
}
#bounds label.on span {
transform: translateX(0%);
    transition: all 1s ease-in-out;
}

#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;
}

代码片段

- Observer

---

只要当前发布的文章有JavaScript标签，所以我用JS编写了它。这是一个简单的jQuery点击事件，可以用其他库替换。 - Observer

Answer 3

添加了一个弹跳效果，看看你喜不喜欢

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

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

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

#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;
  -webkit-animation: toggleOn 0.1s; /* Safari 4.0 - 8.0 */
  animation: toggleOn 0.1s;
}

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

@-webkit-keyframes toggleOn {
   0% {
    transform: translate3d(0px, 0, 1);
  }
  30% {
    transform: translate3d(-10px, 0px, 1);
    background-color: #404055;
  }
  60% {
    transform: translate3d(-5px, 0px, 1px);
  }
}

@keyframes toggleOn {
  0% {
    transform: translate3d(0px, 0, 1);
  }
  30% {
    transform: translate3d(-10px, 0px, 1);
    background-color: #404055;
  }
  60% {
    transform: translate3d(-5px, 0px, 1px);
  }
}

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

</div>

- DagicCross