toxicfox74
toxicfox7410mo ago

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
Unknown User10mo ago
Message Not Public
Sign In & Join Server To View
ghardin137
ghardin13710mo 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
ghardin137
ghardin13710mo 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.
ghardin137
ghardin13710mo ago
for example
Unknown User
Unknown User10mo ago
Message Not Public
Sign In & Join Server To View
ghardin137
ghardin13710mo ago
in this situation, i'd probably avoid it
Unknown User
Unknown User10mo ago
Message Not Public
Sign In & Join Server To View
ghardin137
ghardin13710mo 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
Unknown User
Unknown User10mo ago
Message Not Public
Sign In & Join Server To View
ghardin137
ghardin13710mo ago
this one is going to be a lot of pain
Unknown User
Unknown User10mo ago
Message Not Public
Sign In & Join Server To View
ghardin137
ghardin13710mo ago
it's also REALLY old
toxicfox74
toxicfox7410mo 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
ghardin137
ghardin13710mo ago
Yeah the masonry-layout lib