[CreaOnion]

#react #programowanie #javascript
Jestem ciekaw jak byście rozwiązali problem, który mi się wczoraj przydarzył. Mam w state tablicę obiektów i na kliknięcie przycisku ma się usuwać ostatni element tablicy, w dodatku element ma się animować, nim zniknie.
I teraz, kod którzy wrzucam sprawia, że jeżeli użytkownik kliknie ponownie button szybciej, niż skończy się timeout to następne elementy już lecą bez animacji.
Wiem, że dzieje się tak, bo w momencie kliknięcia pop jeszcze nie usunął elementu, ale nie mam pojęcia jak to inaczej rozwiązać.

[joolekk]

@CreaOnion: blokuj button na czas animacji

[CreaOnion]

@joolekk
Tak zrobiłem xd
Ale nie zadowala mnie to rozwiązanie i może ktoś wpadnie na cos lepszego.

[P.....y]

a nie ogarniesz animacji w css?

[CreaOnion]

@Pan_Jerzy
Animacja jest w css, tu tylko trigger dodaje na OnClick, bo inaczej ciężko.

[laki1]

Wiem, że dzieje się tak, bo w momencie kliknięcia pop jeszcze nie usunął elementu, ale nie mam pojęcia jak to inaczej rozwiązać.

@CreaOnion: Skoro po kliknięciu ustawiasz w obiekcie klucz animated na true, to ja bym sprawdzał czy ostatni element z listy nie ma już tego ustawionego i brał poprzedni. A raczej w drugą stronę przefiltrowałbym listę odrzucając taski z animated === true i dopiero brał ostatni element z listy

[kurczepioro]

@CreaOnion:
Możesz oznaczać elementy parametrem do usunięcia, a na koniec animacji wszystkich usuwać je z DOM/z prawdziwej tablicy.

[M.....l]

@CreaOnion: No w takim prawilnym frameworku jak Vue masz animation hooki. W bieda reakcie pewnie musisz sobie cos takiego zaimplementowac ale na bank nie powinienes ustawiac state'a w timeoucie

[terror_blade]

@CreaOnion: Łoo panie, setTimeout to zła praktyka. Ile czasu trwa animacja i co animujesz?

[CreaOnion]

@terror_blade:
Animuje element listy,, by background li był na czerwono z drobny transformem, który później jest usuwany.
Ale tutaj nie ma innej opcji, niż renderowanie z opóźnieniem, bo w innym przypadku nawet animacja się nie zdąży odpalić, bo komponent się będzie re-renderować od razu.

[Janusz_Rekina]

@CreaOnion: Nie prościej użyć w css @keyframes?

[CreaOnion]

@Janusz_Rekina:
Jak chcesz odpalić keyframes na kliknięcie buttona w Reactcie inaczej niż przez state?

[Janusz_Rekina]

@CreaOnion: Kurła panie ja to ledwie jQuery ogarniam. Nie będę się więcej wypowiadał bo wystarczająco się skompromitowałem ( ͡°( ͡° ͜ʖ( ͡° ͜ʖ ͡°)ʖ ͡°) ͡°)

[terror_blade]

@CreaOnion: Ja bym zrobił coś w tym stylu:

state: {
..items: [],

[Viters]

@CreaOnion: Możesz skorzystać z jakiejś libki, która wspiera React DOM i przejścia, np. react-pose. https://popmotion.io/pose/examples/posegroup-reordering/

Jakbyś chciał sam zaimplementować coś w tym stylu, to można by zacząć od wrappera na listę, który trzyma snapshoty przekazywanych do niego list, porównuje je po kluczach i kolejkuje sobie zadania.

[panie-co-pan]

@CreaOnion: Animacje wejścia/wyjścia w React'cie załatwia się za pomocą react-transition-group. Jest to zalecane przez Facebooka rozwiązanie, obecnie utrzymywane przez społeczność. Po więcej info wbijaj tutaj: https://reactjs.org/docs/animation.html

[alkb]

@CreaOnion: https://github.com/react-spring/react-spring bdb libka