CSS TranslateX не двигается вправо от div - PullRequest
Новая
       65

CSS TranslateX не двигается вправо от div

0 голосов
/ 27 апреля 2020

Я пытаюсь заставить тумблер переместить его на 100% вправо. Поскольку я пытаюсь сделать его отзывчивым, я не могу настроить его на перемещение хх количества пикселей.

Можете ли вы помочь? 

input:checked + .slider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

https://jsfiddle.net/Lc1tdhgb/1/

Спасибо

1 Ответ

0 голосов
/ 27 апреля 2020 

setTimeout(function() {
  document.getElementById('togBtn').checked = true;
}, 1000)
#toggle {
  width: 100%;
  height: 100%;
  position: relative;
}

.switch {
  position: absolute;
  display: inline-block;
  width: 100%;
  /*min-height: 32px;*/
  height: auto;
  top: 0;
}

.switch input {
  display: none;
}

.slider {
  cursor: pointer;
  background-color: #ca2222;
  -webkit-transition: .5s;
  transition: .5s;
  border-radius: 32px;
  padding: 12px 0;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.1em;
  width: 1.1em;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .5s;
  transition: .5s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #3eab37;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  left: calc(100% - 20px);
  /*-webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);*/
}


/*------ ADDED CSS ---------*/

.slider:after {
  content: 'OFF';
  color: white;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 0.7em;
  font-family: Roboto, sans-serif;
}

input:checked+.slider:after {
  content: 'ON';
}


/*--------- END --------*/
<div id="toggle">
  <label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>
</div>

Хорошо, просто убедитесь, что контейнер элементов соответствует position: relative;, поэтому обертка имеет ограничения для элементов absolute внутри него. Тогда right - это фактически то, насколько далеко вы хотите, чтобы элемент был, в этом случае вы могли бы использовать либо right: 0%;, либо left: 100%;, хотя вы столкнулись с ошибкой в ​​том факте, что вы будете игнорируя поля из стиля родителя. Вот почему я добавил left: calc(100% - 20px); (20px было методом проб и ошибок, пока я не выровнял его с внешней границей коммутатора!), Затем теперь он работает как хотел. Рад помочь :)

...