grid animations not working/snapping because of react.

hey can anyone help me? i have a problem with my grid's (masonry-layout) built in animations not working properly because of how react redraws the screen. is this a common issue? basically i have a grid of cards (which are child components of the grid). the cards are lists that can be collapsed. -when i update states everything snaps to place (instead of smoothly) -if i add a transition to the collapse of the card in CSS, the grid snaps BEFORE the actual height changes... resizing the window makes the animation perform perfectly (my guess is bc it triggers some sort of recheck of the DOM???) live link in the readme: https://github.com/ggkfox/checklister-app just try clicking around on the card's headers and you will see. i appreciate any help, even if we cant get it fixed. im just at a complete loss. too much for a beginner.
GitHub
GitHub - ggkfox/checklister-app
Contribute to ggkfox/checklister-app development by creating an account on GitHub.
UU
Unknown User233d ago
G
ghardin137233d ago
looks like masonry-layout here also messes with the dom, i'd suggest not trying to do that with react there are react versions of this
G
ghardin137233d ago
React Masonry component - Material UI
Masonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps.
G
ghardin137233d ago
for example
UU
Unknown User233d ago
G
ghardin137233d ago
in this situation, i'd probably avoid it
UU
Unknown User233d ago
G
ghardin137233d ago
they're already pulling in a library. one that aligns better with react would be better in this situation plenty of other places to learn how to interact with libraries that don't interact with react directly
UU
Unknown User233d ago
G
ghardin137233d ago
this one is going to be a lot of pain
UU
Unknown User233d ago
G
ghardin137233d ago
it's also REALLY old
T
toxicfox74233d ago
ah ok. i havent tried this one. i tried the react-masonry-css and it didnt have all the features. so i thought i was forced to use the standard version. wait what is really old? the non-react library i was using? well regardless i will give that react version a shot. ty so much. should be a lot easier if it works
G
ghardin137233d ago
Yeah the masonry-layout lib
UU
Unknown User232d ago