Question

我正在尝试为我的可切换开关添加动画，但无法弄清楚它是如何工作的。我试图让它在点击时滑到是或否。基于我的在线阅读，我不确定这种类型的html设置是否可以实现动画。

HTML：

<div class="rds-toggle-switch">
<div class="rds-toggle">
    <label>
       <input type="radio" name="toggle" checked/>
       <div class="rds-toggle-header input-checked">Yes</div>
   </label>    
 </div>
    <div class="rds-toggle">
        <label>
            <input type="radio" name="toggle"/>
            <div class="rds-toggle-header">No</div>
        </label>
    </div>
</div>

CSS：

.rds-toggle-switch{
    background: #ebebeb;
    padding-left: 2px;
    border: 1px solid #898989;
    border-radius: 3px;
}

.rds-toggle {
    margin-bottom: 1px;
    margin-top: 2px;
    display: inline-block;
    color: blue;
    width: calc(50% - 3px);
}

.rds-toggle label {
    width: 100%;
}

.rds-toggle label .rds-toggle-header {
    text-align:center;
    cursor: pointer;
    height:36px;
    padding: 6px;
}

.rds-toggle label .rds-toggle-subtext{
    font-size: .7857142857em;
    color: #ccc;
    line-height: 0.8;
    font-weight: 300;
}

.rds-toggle label input {
    position:absolute;
    top:-20px;
}

.rds-toggle .input-checked {
    border-radius: 3px;
    color:#000;
    border: 1px solid #2e51a1;
    background-color: white;
}

JS：

$('.rds-toggle').click(function(){
    var $ele = $(this);
    $ele.children('label').children('div').addClass('input-checked');
    $ele.siblings('.rds-toggle').children('label').children('div').removeClass('input-checked');
    $ele.children('label').children('input').prop('checked', true);
});

或 http://jsfiddle.net/cou1u6us/

Answer 1

你不能制作这样的幻灯片因为你使用了两个不同的元素 - 基本上，你需要一种变形，所以当一个元素开始离开该区域时，另一个元素开始出现，等等。它可能会变得复杂。

相反，我建议您使用单个元素来表示活动开关状态，类似于此 - 它使用绝对定位的“开关状态”（#rds-state）元素，该元素使用CSS过渡动画（为其{{设置动画1}} property）：

left

$('.rds-toggle').click(function() {
  var $ele = $(this);
  $('#rds-state').css('left', $ele[0].offsetLeft);
  $ele.children('label').children('div').addClass('input-checked');
  $ele.siblings('.rds-toggle').children('label').children('div').removeClass('input-checked');
  $ele.children('label').children('input').prop('checked', true);
});

.rds-toggle-switch {
  background: #ebebeb;
  padding-left: 2px;
  border: 1px solid #898989;
  border-radius: 3px;
}
.rds-toggle {
  margin-bottom: 1px;
  margin-top: 2px;
  display: inline-block;
  color: blue;
  width: calc(50% - 3px);
}
.rds-toggle label {
  width: 100%;
}
.rds-toggle label .rds-toggle-header {
  text-align: center;
  cursor: pointer;
  height: 36px;
  padding: 6px;
  position: relative;
}
.rds-toggle label .rds-toggle-subtext {
  font-size: .7857142857em;
  color: #ccc;
  line-height: 0.8;
  font-weight: 300;
}
.rds-toggle label input {
  position: absolute;
  top: -20px;
}
.rds-toggle .input-checked {
  color: #000;
}
#rds-state {
  border-radius: 3px;
  color: #000;
  border: 1px solid #2e51a1;
  background-color: white;
  height: 48px;
  width: calc(50% - 15px);
  position: absolute;
  left: 11px;
  transition: left 0.2s linear;
}

Answer 2

如果您在项目中使用jquery mobile 1.4，那么jQuery mobile有一个很棒的Flipswitch可以满足您的需求。

示例：

http://jsfiddle.net/cou1u6us/9/

jQuery Mobile JS包括

http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js

HTML

<div class="rds-toggle-switch">  
    <div data-role="fieldcontain">
        <label for="checkbox-based-flipswitch">Checkbox-based:</label>
        <input type="checkbox" name="toggle" id="checkbox-based-flipswitch" data-role="flipswitch">
    </div>
</div>

Answer 3

你可以制作幻灯片。它们是独立的元素并不重要。只需要一个附加到其中一个盒子的psuedo元素来回滑动。换句话说......

<input type="radio" id="yes" name="test" value="Yes" checked>
<label for="yes">Yes</label>
<input type="radio" id="no" name="test" value="No">
<label for="no">No</label>

然后是一点CSS

input[type="radio"]{
  position:absolute;
  height:0px;
  width:0px;
}
input[type="radio"]:checked + label{
  font-style:italic;  
}
label{
  font-size:30px;  
}
#yes::before{
  content:"";
  height:30px;
  width:45px;
  position:absolute;
  left:-5px;
  top:0;
  opacity:1;
  background-color:rgba(0,0,0,.5); 
  transform:translateX(100%);
  transition:transform .4s ease-in;
}
#yes:checked::before{
  transform:translateX(0);  
}

我在这里有一支笔http://codepen.io/pocketg99/pen/KwreLd

当您提交表单时，一切都将按预期运行。

关于切换开关的动画

3 个答案: