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>