Potrzeba pomocy z javascript toggle animacja wyjścia

Question

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

Comments

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> <!-- ??? -->

 

Answer 1

Proponuje użyć (jak już wspomniał @pablop76) Event 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)

 

Answer 2

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

Answer 3

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.

 

Comments

Może OP: 

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