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.
14 Replies
Unknown User•12mo ago
Message Not Public
Sign In & Join Server To View
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
React Masonry component - Material UI
Masonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps.
for example
Unknown User•12mo ago
Message Not Public
Sign In & Join Server To View
in this situation, i'd probably avoid it
Unknown User•12mo ago
Message Not Public
Sign In & Join Server To View
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
Unknown User•12mo ago
Message Not Public
Sign In & Join Server To View
this one is going to be a lot of pain
Unknown User•12mo ago
Message Not Public
Sign In & Join Server To View
it's also REALLY old
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
Yeah the masonry-layout lib