• 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
277 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,490 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,490 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,490 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 153 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,433 wizyt
pytanie zadane 11 stycznia 2017 w JavaScript przez Daniel Kudyba Obywatel (1,260 p.)

92,653 zapytań

141,536 odpowiedzi

319,931 komentarzy

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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...