Только один из пяти переходов div правильно

Question

После нажатия кнопки элементы должны переместиться на свои вторые позиции. Кажется, это работает только с последним элементом, где я использовал !important, который я не хочу использовать. Вот мой код:

let ruch = document.querySelectorAll('.menu');
let myArray = Array.from(ruch);

let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
  myArray.forEach(function (item) {
    if (item == myArray[0]) {
      item.classList.add('run1');
    } else if (item == myArray [4]) {
      item.classList.add('run2');
    } else {
      item.classList.add('run');
    }
  });
});

body {
  background-color: #302e2e;
  font-size:22px;
}
#btn{
  position: absolute;
  left: 914px;
  top: 180px;
}
.wrapper{
  position: relative;
  width:600px;
  margin: 0 auto;
}
.container{
  position:absolute;
  top:250px;
  width:0px;
}
.menu{
  padding:5px;
  border:1px solid #323232;
  width:100px;
  height:100px;
  background:#46f4a0;
  border-radius:20px;
  position: absolute;
  box-sizing: border-box;
}
.menu:nth-child(2){
  left:105px;
}
.menu:nth-child(3){
  left:210px;
}
.menu:nth-child(4){
  left:315px;
}
.menu:nth-child(5){
  left:420px;
}
.run{
  opacity: 0;
  transition:3s ease-in-out;
  z-index: -1;
  top:110px;
}
.run1{
  opacity: 0;
  transition:3s ease-in-out;
  z-index: -1;
  left:-110px;
}
.run2{
  opacity: 0;
  transition:3s ease-in-out;
  z-index: -1;
  left:530px!important;
}

<button id="btn">
    Kliknij
  </button>
  <div class="wrapper">
    <div class="container ">
      <div class="menu ">About</div>
      <div class="menu ">My Projets</div>
      <div class="menu ">Some stuff</div>
      <div class="menu ">Werid shits</div>
      <div class="menu ">Contact</div>
    </div>
  </div>

Спасибо за вашу помощь

Answer 1

Как это? ( дополнительный CodePen )

let menuItems = Array.from(document.querySelectorAll(".menu"));

document.getElementById("btn").addEventListener("click", function() {
  menuItems[0].classList.add("run1");
  menuItems[4].classList.add("run2");
  menuItems.slice(1, 4).forEach(function(item) {
      item.classList.add("run");
  });
});

body {
  background-color: #302e2e;
  font-size: 22px;
}
#btn {
  position: absolute;
  left: 914px;
  top: 180px;
}
.wrapper {
  position: relative;
  width: 600px;
  margin: 0 auto;
}
.container {
  position: absolute;
  top: 250px;
  width: 0px;
}
.menu {
  padding: 5px;
  border: 1px solid #323232;
  width: 100px;
  height: 100px;
  background: #46f4a0;
  border-radius: 20px;
  position: absolute;
  box-sizing: border-box;
}
.menu:nth-child(2) {
  left: 105px;
}
.menu:nth-child(3) {
  left: 210px;
}
.menu:nth-child(4) {
  left: 315px;
}
.menu:nth-child(5) {
  left: 420px;
}
.menu.run {
  opacity: 0;
  transition: 3s ease-in-out;
  transform: translateY(110px);
}
.menu.run1 {
  opacity: 0;
  transition: 3s ease-in-out;
  transform: translateX(-110px);
}
.menu.run2 {
  opacity: 0;
  transition: 3s ease-in-out;
  transform: translateX(110px);
}

<button id="btn">Kliknij</button>
<div class="wrapper">
  <div class="container">
    <div class="menu">About</div>
    <div class="menu">My Projets</div>
    <div class="menu">Some stuff</div>
    <div class="menu">Werid shits</div>
    <div class="menu">Contact</div>
  </div>
</div>

Пожалуйста, посмотрите еще раз на ваш CSS Вам следует избегать работы только с абсолютными позициями и значениями пикселей, так как они будут отличаться на каждом устройстве.

Answer 2

Вам нужно переместить переход в '.menu', и это должно выглядеть так: transition:3s transform ease-in-out;. И в «.run», «.run1», «.run2», если осталось, заменить на: transform: translateX(/*value*/px);. А когда вершина заменить на: transform: translateY(/*value*/px);.