Почему анимация css не работает с переключателем?

Question

У меня есть простая кнопка переключения с CSS и JavaScript, мне нужна анимация, пока кнопка переключается или нажимается. У меня только проблема с анимацией, больше ничего. Есть ли проблемы с позиционированием (относительным, абсолютным)? Но насколько я знаю, свойство css left имеет анимацию, тогда почему здесь это не работает?

(function (){
  
  let 
  
      btn = document.querySelector ('.input-switch'),
      container = document.querySelector ('.input-switch-container'),
      checkbox = container.querySelector ('input[type="checkbox"]');
  
  btn.addEventListener ('click', function (){  
    container.classList.toggle('active');
    checkbox.checked ?  checkbox.checked = false :  checkbox.checked = true;
  });
  
}())

*,
*::before,
*::after{
  box-sizing: border-box;
}

.input-switch{
  border-radius: .25rem;
  width: 112px;
  border: 1px solid #ddd;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.input-switch-container {
  position: relative;
  display: flex;
  transition: all 1.3s linear;
}

.input-switch-container.active{
  left: -56px;
}

.input-switch-on,  
.input-switch-off,
.input-switch-empty{
  padding: .25rem 1rem;
  line-height: 1.5;
  flex: 0 0 50%; 
}

.input-switch-on{
  background-color: #007bff;
  color: #fff;
}

.input-switch-off{
  background-color: #f1f1f1;
}

.input-switch-empty{
  background-color: #fff;
}

.input-switch input[type="checkbox"]{
  opacity: 0;
}

<div class="input-switch">
  <div class="input-switch-container">
    <span class="input-switch-on">ON</span>
    <span class="input-switch-empty"></span>
    <span class="input-switch-off">OFF</span>
    <input type="checkbox" />
  </div>
</div>

Answer 1

Задайте .input-switch-container начальное left значение.

(function (){
  
  let 
  
      btn = document.querySelector ('.input-switch'),
      container = document.querySelector ('.input-switch-container'),
      checkbox = container.querySelector ('input[type="checkbox"]');
  
  btn.addEventListener ('click', function (){  
    container.classList.toggle('active');
    checkbox.checked ?  checkbox.checked = false :  checkbox.checked = true;
  });
  
}())

*,
*::before,
*::after{
  box-sizing: border-box;
}

.input-switch{
  border-radius: .25rem;
  width: 112px;
  border: 1px solid #ddd;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.input-switch-container {
  position: relative;
  display: flex;
  transition: all 1.3s linear;
  left: 0;
}

.input-switch-container.active{
  left: -56px;
}

.input-switch-on,  
.input-switch-off,
.input-switch-empty{
  padding: .25rem 1rem;
  line-height: 1.5;
  flex: 0 0 50%; 
}

.input-switch-on{
  background-color: #007bff;
  color: #fff;
}

.input-switch-off{
  background-color: #f1f1f1;
}

.input-switch-empty{
  background-color: #fff;
}

.input-switch input[type="checkbox"]{
  opacity: 0;
}

<div class="input-switch">
  <div class="input-switch-container">
    <span class="input-switch-on">ON</span>
    <span class="input-switch-empty"></span>
    <span class="input-switch-off">OFF</span>
    <input type="checkbox" />
  </div>
</div>

Вы можете достичь тех же результатов без javascript, если переставите HTML и внесите несколько изменений в свой CSS.

Важная часть CSS:

.input-switch input[type="checkbox"]:checked + .input-switch-container {
  left: -56px;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

.input-switch{
  border-radius: .25rem;
  width: 112px;
  border: 1px solid #ddd;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  display: block;
}

.input-switch-container {
  position: relative;
  display: flex;
  transition: all .3s ease;
  left: 0;
}

.input-switch-on,  
.input-switch-off,
.input-switch-empty{
  padding: .25rem 1rem;
  line-height: 1.5;
  flex: 0 0 50%; 
}

.input-switch-on{
  background-color: #007bff;
  color: #fff;
}

.input-switch-off{
  background-color: #f1f1f1;
}

.input-switch-empty{
  background-color: #fff;
}

.input-switch input[type="checkbox"] {
  display: none;
}

.input-switch input[type="checkbox"]:checked + .input-switch-container {
  left: -56px;
}

<label class="input-switch">
  <input type="checkbox" />
  <div class="input-switch-container">
    <span class="input-switch-on">ON</span>
    <span class="input-switch-empty"></span>
    <span class="input-switch-off">OFF</span>
  </div>
</label>