Jak animować usuwanie elementu?

Hej, uzywam TanstackTable do tworzenia tabel w NextJS (ale to jest mniej istotne) i mam nastepujacy problem. Do mojej tabeli chcialbym dodac przycisk ktory pokazuje wiecej danych i chcialbym zeby szczegoly "wysunely" sie z prawej strony mojej tabeli i przykryly wszystkie wiersze Robie to w ten sposob ze do mojej tabeli dodalem logike:

{table.getIsSomeRowsExpanded() && (
  <div
    className={`table-card bg-black ${
      table.getIsSomeRowsExpanded()
        ? 'animate-card-open'
        : 'animate-card-closed'
    }`}
  >
    <div className={`table-card-inner `}>
      <Button
        onClick={() => {
          table.toggleAllRowsExpanded();
        }}
      >
        Close
      </Button>
    </div>
  </div>
)}

Czyli jesli jakis wiersz jest "expanded", wygeneruj <div>a ze szczegolami i zanimuj go animate-card-open. I to dziala i ladnie sie element generuje i animuje. Problem jest natomiast z zamykaniem elementu bo w momencie w ktorym zamykam karte, znika ona natychamist zamaist byc ladnie zanimowana. Wynika to pewnie z faktu ze state sie zmienia i przez to moja tabela jest przegenerowana wiec naturalnie nie juz tego diva wiec nie ma co animowac. Pytanie jest co powinienem zmienic zeby zanim div zostanie calkowicie usuniety z html, uzyc animacji animate-card-closed (ktora robie proste transform: translateX(100%))

Kokos12345 napisał(a):

Pytanie jest co powinienem zmienic zeby zanim div zostanie calkowicie usuniety z html, uzyc animacji animate-card-closed (ktora robie proste transform: translateX(100%))

Musisz opóźnić usunięcie diva do momentu wykonania animacji :)

Najprostszym rozwiązaniem byłoby rozbicie tego na 2 wartości, pierwsza odpowiedzialna za działanie animacji, oraz druga służąca do pojawienia / ukrycia elementu + setTimeout, aby opóźnić ukrycie.

Odrobine bardziej rozbudownym rozwiązaniem mogłoby być zastąpienie setTimeout eventem animationend, lub transitionend, aby animacja sama nas poinformowała kiedy się skończy.

https://developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event

https://developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event