Когда я помещаю toggleclassList ('open) в мой класс .sidebar, свойства перехода не будут работать только на .sidebar Почему он не будет работать?

Question

Вот мой код и javascript. Я попытался удалить ширину из исходного класса .sidebar, но это не работает. Nav-ссылки идут гладко, но фон .sidebar встает на свои места. Он не плавно переходит с остальными элементами, но когда размер браузера изменяется, переходы происходят. Просто когда я нажимаю на действие события, оно защелкивается на месте.

var toggler = document.getElementsByClassName('toggler')[0]
var sideBar = document.getElementsByClassName('sidebar')[0]

toggler.addEventListener('click', function openSideBar() {
  sideBar.classList.toggle('open')
});

.menu {
  height: 100vh;
  width: 100%;
  background: #eeefcf;
}

h1{
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-toggler{
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  background: purple;
  z-index: 1;
  transition: ease-in .4s;
}

.toggler {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition: all ease-in .9s;
}

 .sidebar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: -200px;
  background: rgb(45, 125, 218);
  transition: ease 0.9s;
} 

.nav-links {
  position: absolute;
  top: 100px;
  left: -70px;
  display: flex;
  flex-direction: column;
  transition: ease-in .4s;
}

.nav-link {
  margin: 15px 0px;
}

.nav-link a {
  color: white;
  text-decoration: none;
}

.open {
  width: 250px;
  transition: ease 2s all;

}

.open .nav-links {
  left: 70px;
  transition: ease-in all .5s;
}

<div class="menu">
  <h1>Move It over</h1>
  <div class="menu-toggler">
    <input type="checkbox" class="toggler">
  </div>

  <aside class="sidebar">
    <ul class="nav-links">
      <li class="nav-link"><a href="">Home</a></li>
      <li class="nav-link"><a href="">About</a></li>
      <li class="nav-link"><a href="">Services</a></li>
      <li class="nav-link"><a href="">Contact</a></li>
    </ul>
  </div>
</aside>

Answer 1

Вы установили ширину .sidebar на -200px, что является недопустимым значением.
Если вы установите значение 0px, оно будет анимировано.