• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

0 głosów
62 wizyt
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 (36,150 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.
komentarz 29 czerwca 2018 przez Paweł Kościelny Początkujący (360 p.)
jak sie nie znasz to po co sie wypowiadasz? wprowadzasz tylko zamęt, napisałem jaki jest problem nad kodem

1 odpowiedź

0 głosów
odpowiedź 1 lipca 2018 przez DavidMCPolska Bywalec (2,760 p.)
Składnia transition wygląda tak:
transition: <co ma animować> <czas> <funkcja animacji> <opóźnienie>;

U ciebie jest podany czas i funkcja, a nie ma podanego co ma animować. Jeżeli ma animować wszystko to wpisujemy tam "all".

Powinno to wyglądać tak: transition: all 5s ease-in-out;

Przy okazji po co do menu wpisujesz to osobno? Nie lepiej do wszystkich to dać skoro wszędzie jest takie samo?

Podobne pytania

0 głosów
1 odpowiedź 215 wizyt
0 głosów
1 odpowiedź 46 wizyt
pytanie zadane 20 maja 2017 w HTML i CSS przez Dorian Bajorek Dyskutant (7,820 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

64,868 zapytań

111,331 odpowiedzi

234,217 komentarzy

46,731 pasjonatów

Przeglądających: 220
Pasjonatów: 5 Gości: 215

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...