Új hozzászólás Aktív témák

• #7138 K1nG HuNp őstag

  Új Válasz 2019-05-02 01:23:26 #7138

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  K1nG HuNp

  őstag

  Még kicsit a DOM-nál maradva: egész sokat foglalkozok animációkkal és kellene egy sajat framework, mert hogy netem nem talaltam ami megkönnyíti a dolgom.

  Az animacioim amiket hasznalok mindig a CSS-ben vannak, megirom a @keyframest aztan egy classt ami tartalmazza az adott animaciot idovel stb.
  Pelda:
  .enter {
animation: enter 10s ease;
}

@keyframes enter {
0% {
transform: scale(.1);
}

100% {
transform: scale(1);
}
}

  Ezt a classt csak hozzacsapom ahhoz a dom elementhez amit animalni szeretnek es kesz.
  Erre irtam egy nagyon egyszeru fuggvenyt:
  function classAnimator(dom,className) {
dom.classList.add(className);
dom.addEventListener("animationend", clearIt);
function clearIt(){
dom.classList.remove(className);
dom.removeEventListener("animationend", clearIt);
}
}

  Amit igy hivok meg:
  const button = document.getElementById("testButton");
const box = document.getElementById("box");

button.addEventListener("click", ()=>{classAnimator(box, "enter")})

  Köv lépésben azt szeretném megcsinálni, hogy a button-ról leveszem a click event listenert, tehat amig tart az animacio ne erdekelje, hogy nyomkodjak.
  De elakadtam.

  Van egy csunya megoldas amiben egy glob valtozoban kellene tarlonom, hogy "clicked"-e a button es ha igen akkor instant returnol a classAnimator. De ja ez csúnya.

  Próbáltam még klónozni az event.target-et ami ugye a button jelen esetben, ez patentül működött is mert leszedte az eventListenert (bar az osszes gyerekerol leszedne de most ez még nem zavar), de utána nem tudtam értelmesen visszatenni rá mert valami para volt a masodik lefutastol a "parentNode"-val
  var clone = event.target.cloneNode(true);
event.target.parentNode.replaceChild(clone, event.target);

  Ti hogyan oldanátok meg a problémát?
  Tehat az a vegso cel, hogy egy gomb, kep, barmi eventlistenerbe belerakom a fuggvenyem, megadom neki mit animaljon, megcsinalja az animaciot, utana leszedi az animacio class-t, es az egesz kozben blokkolja az ujabb eventeket a gomb/kep/barmi -rol.

Új hozzászólás Aktív témák