可切换开关上的动画

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

jQuery mobile 有一个不错的 Flipswitch，可以满足您的需要，如果您可以在项目中使用 jquery mobile 1.4。

示例：

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

jQuery 移动 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 2

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

相反，我建议您使用单个元素来表示活动开关状态，就像这样 - 它使用绝对定位的 "switch state" (#rds-state) 元素，该元素使用 CSS 过渡（动画其 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="rds-toggle-switch">
  <div id="rds-state"></div>
  <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>

Answer 3

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

<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

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

可切换开关上的动画

Animation on togglable switch

css

jquery

animation