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

Potrzeba pomocy z javascript toggle animacja wyjścia

Object Storage Arubacloud
0 głosów
297 wizyt
pytanie zadane 19 marca 2023 w JavaScript przez AgentTecza Obywatel (1,810 p.)

Witam, robię sobie diva który poprzez kliknięcie wysuwa się na ekran i to działa razem z animacją nie ważne w który przycisk się kliknie i animacja wejścia jest zawsze. Lecz mam drugą animacje, która chce zrobić na wyjście jak ktoś wyłącza tego diva żeby odsuwał się w drugą stronę poprzez animacje jak to zrobić? Mógłby mi ktoś z tym pomóc. Również potrzebuje pomocy z tym że chciałbym żeby ten div nie był wyłączany tylko przez kliknięcie "x" ale również przez klikniecie na nie ważne jaką cześć tła jak to zrobić? Z góry dziękuje za pomoc również wrzucam codepena żeby było wiadomo o co chodzi https://codepen.io/zjebee/pen/MWqqwdO

komentarz 22 marca 2023 przez VBService Ekspert (254,630 p.)

BTW, brakuje "domykającego" </div> dla 

<div id="fo" class="fo">
<div id="fo" class="fo">
  <div style="background-color: #000; transform: translate(50%,30%); border-radius: 30px; height: 70%; width: 50%;">
    <button id="btn-close" style="border: 0; background-color: #000; margin-top: 2%; font-size: 3rem; color: white; float: right;">
      <span class="btn-form-close">&times;</span>        
    </button>
  </div>
  <button id="btnk" class="but-oferts">Otworz</button>
  <button id="btnk1" class="but-oferts">Otworz</button>
  <button id="btnk2" class="but-oferts">Otworz</button>
  <button id="btnk3" class="but-oferts">Otworz</button>
</div> <!-- ??? -->

 

3 odpowiedzi

+1 głos
odpowiedź 22 marca 2023 przez VBService Ekspert (254,630 p.)

Proponuje użyć (jak już wspomniał @pablop76Event Delegation i 

diva który poprzez kliknięcie wysuwa się na ekran

zapisać w css np. tak

div-element {
  position: absolute;
  top: 3em;
  transform: translatex(-120%);
  background-color: black;
  border-radius: 2em;
  height: 70%; 
  width: 50%;
  transition: transform 0.5s ease;
}

i za pomocą js-a dodawać klasę dla "wysuwania" np.

.show {
  transform: translatex(0);
}

i dla "schowania" usuwać powyższą klasę.

Przykład: on-line

 

żeby ten div nie był wyłączany tylko przez kliknięcie "x" ale również przez kliknicie na nie ważne jaką cześć tła

Przykład: on-line (ten sam co powyżej, zmieniony nieco kod js)

 

0 głosów
odpowiedź 20 marca 2023 przez pablop76 VIP (123,180 p.)

Zamiast powtarzać kod użyj e.target. Wykryjesz to co Cię interesuje i wykonasz akcje.

0 głosów
odpowiedź 20 marca 2023 przez kozacko Obywatel (1,580 p.)

Nie prościej byłoby użyć jakieś libki JS'a? Np: https://animejs.com/

Żyjemy w 2023 nikt praktycznie nie pracuję już na CSS + VANILLA JS.

 

1
komentarz 22 marca 2023 przez VBService Ekspert (254,630 p.)

Może OP: wink

  • uczy się właśnie css-a i (lub) javascript
  • potrzebuje tylko tej animacji (IMHO nie ma potrzeby "podpinać" libki dla jednego, dwóch efektów)

Podobne pytania

–4 głosów
0 odpowiedzi 158 wizyt
pytanie zadane 31 stycznia 2020 w Ogłoszenia, zlecenia przez Wasiaczek999 Nowicjusz (160 p.)
0 głosów
1 odpowiedź 189 wizyt
pytanie zadane 6 maja 2017 w JavaScript przez Vorex444 Dyskutant (9,610 p.)
0 głosów
2 odpowiedzi 1,437 wizyt
pytanie zadane 11 stycznia 2017 w JavaScript przez Daniel Kudyba Obywatel (1,260 p.)

92,698 zapytań

141,612 odpowiedzi

320,123 komentarzy

62,057 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

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!

...