Animowanie elementów z pomocą transition, animuje tylko 4 z 5.

pytanie zadane 29 czerwca 2018 w HTML i CSS przez Paweł Kościelny Początkujący (360 p.)
edycja 29 czerwca 2018 przez Paweł Kościelny

Poniżej, kodzik, animuje się ostatni element, a reszta "przeskakuje". Dodatkowo przy 5 elemencie nic się nie działo dopóki nie dodałem atrybutu "!important"

Pomocy ;/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <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>
<style>

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;transition:  5s ease-in-out;
}
.menu:nth-child(3){
  left:210px;transition:  5s ease-in-out;
}
.menu:nth-child(4){
  left:315px;transition:  5s ease-in-out;
}
.menu:nth-child(5){
  left:420px;transition:  5s ease-in-out;
}
.run{
opacity: 0;
transition:5s ease-in-out;
z-index: -1;
top:-110px;
}
.run1{
opacity: 0;
transition:5s ease-in-out;
z-index: -1;
left:-110px;
}
.run2{
opacity: 0;
transition:5s ease-in-out;
z-index: -1;
left:530px!important;
}
 </style>


<script>
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');
    }
  });
});
</script>

</body>
</html>

komentarz 29 czerwca 2018 przez Aisekai Nałogowiec (42,190 p.)

Nie pomogę, bo nie znam css ani JS ale co do tematu:

1. Zmień nazwę tematu na jakąś bardziej sensowną typu: Animowanie [tu wstaw nazwę obiektu którego chcesz animować]"

2. "Pomocy ;/ " takie coś na końcu - lepiej nie używać. Samo to, że piszesz temat, oznacza to że potrzebujesz pomocy. Jak ja widzę zwroty tego typu, to mam przed oczami osobę co napisała kawałek kodu, nie zadziałało i od razu wstawiła temat na forum, nawet nie szukając odpowiedzi w internecie.

3. Bardziej szczegółowo opisz problem, zwłaszcza podając linie kodu w których przypuszczasz, że może być błąd. etc. Bardzo pomaga w znalezieniu błędu.