Регулировка тумблера в плавной трансдукции и смене цвета - PullRequest
Новая
       10

Регулировка тумблера в плавной трансдукции и смене цвета

0 голосов
/ 07 июня 2018

Я пытаюсь заставить кнопку переключателя двигаться плавно, точно так же, как переключатель 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>

Ответы [ 3 ]

0 голосов
/ 07 июня 2018

Использование 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;
}

Скрипка

0 голосов
/ 07 июня 2018

Добавлен эффект отскока, посмотрите, нравится ли вам 

#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>
0 голосов
/ 07 июня 2018

Я понял часть этого.Вы используете два отдельных элемента для перехода.Вместо этого используйте один.Поместите их под одной этикеткой.Кроме того, добавьте переходы в скользящий диапазон.Сделайте кнопки непрозрачными 0 и сделайте так, чтобы они занимали весь размер надписи.Когда кнопка отмечена, вы устанавливаете ее на 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>
...