Question

我尝试让切换按钮在IOS切换切换时平滑过渡。此外，我还试图在切换开启时将#bounds的边框颜色更改为绿色。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我已经找到了部分内容。您正在使用两个单独的项目进行转换。相反，使用一个。把它们放在同一个标签下面。此外，添加到滑动范围的过渡。使按钮不透明度为0并使它们占据标签的整个大小。选中某个按钮后，将其设置为display : none。另一个将占据它的位置。此外，由于它们占据了容器的整个尺寸，因此在您点击的位置并不重要。

<强>更新修正了它：D

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

Fiddle

Answer 3

添加了反弹效果，看看你是否喜欢它

＆＃13;

document.write(urlp["myfirstname"]);

＆＃13;

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

＆＃13;

调节拨动开关，实现平滑的换档和换色

3 个答案: