• 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.

VPS Starter Arubacloud
0 głosów
241 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 (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.
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,770 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ź 462 wizyt
0 głosów
1 odpowiedź 104 wizyt
pytanie zadane 20 maja 2017 w HTML i CSS przez Dorian Bajorek Dyskutant (7,920 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...