Анимация на переключателе togglable

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 переходов (оживляющий его свойство 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 2

JQuery мобильный имеет приятный Flipswi tch, который делает то, что вам нужно, если вы в порядке с использованием jquery mobile 1.4 в своем проекте.

Пример:

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

Вы можете сделать слайд. Неважно, что они отдельные элементы. Просто перед тем, как какой-нибудь пьезоэлемент, прикрепленный к одному из ящиков, сдвинется назад и вперед. Другими словами ...

<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

При отправке формы все будут вести себя, как и ожидалось ,