#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ć.
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ć.
- Najlepsze
- Wszystkie komentarze
Tak zrobiłem xd
Ale nie zadowala mnie to rozwiązanie i może ktoś wpadnie na cos lepszego.
@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
Możesz oznaczać elementy parametrem do usunięcia, a na koniec animacji wszystkich usuwać je z DOM/z prawdziwej tablicy.
Animacja jest w css, tu tylko trigger dodaje na OnClick, bo inaczej ciężko.
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.
Jak chcesz odpalić keyframes na kliknięcie buttona w Reactcie inaczej niż przez state?
state: {
..items: [],
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.