grid animations not working/snapping because of react.

Ttoxicfox74

8/29/2023

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.

UUUnknown User

8/30/2023

6 Messages Not Public

Gghardin137

8/30/2023

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 https://mui.com/material-ui/react-masonry/ for example

UUUnknown User

8/30/2023

2 Messages Not Public

Gghardin137

8/30/2023

in this situation, i'd probably avoid it

UUUnknown User

8/30/2023

Message Not Public

Gghardin137

8/30/2023

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

UUUnknown User

8/30/2023

Message Not Public

Gghardin137

8/30/2023

this one is going to be a lot of pain

UUUnknown User

8/30/2023

Message Not Public

Gghardin137

8/30/2023

it's also REALLY old

Ttoxicfox74

8/30/2023

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

Gghardin137

8/30/2023

Yeah the masonry-layout lib

UUUnknown User

8/30/2023

Message Not Public

Looking for more? Join the community!

Reactiflux

grid animations not working/snapping because of react.

Join Server

Reactiflux

grid animations not working/snapping because of react.

Join Server

Want results from more Discord servers?

Add your server

Recommended Posts

hoangvu12 – 05-14 Aug 29I'm using NextJS v13 app router, I have following folder structure. I want to redirect the url from Make A Div Resizable So That Extends Only Till a Draggable Div in ReactI am working on a project: https://github.com/analysis230/lose-control I am planning to make the th ✅ – ✅ – kardain_ – 15-32 Aug 21hello, i'm wondering what is the difference between : 1: ```interface InterfaceName { property1 : nu React Three Fiber Canvas Does Not ShrinkI have had this problem across multiple projects with `react-three-fiber` below is the structure of hoangvu12 – 10-29 Aug 18I want to pass a file object from webapp to background script of my extension. Normally message pass