search

CarlosNZ / json-edit-react

React component for editing/viewing JSON/object data
https://carlosnz.github.io/json-edit-react/
MIT License
187 stars 18 forks source link

Improve collapse animation #98

Closed CarlosNZ closed 4 months ago

CarlosNZ commented 4 months ago

We're currently using this slightly hacky way of animating the collapse. It's okay, but the method I'm using to estimate the height of a node before it is opened is not that great, and results in a noticeable lag when it differs from the true value by a significant amount.]

Would be good to come up with a more robust solution.

MattChowski commented 4 months ago

did you try fiddling with the "scrollHeight" property of HTMLElements? On expand you can get the scrollHeight, set it to that element, then on transitionEnd event you can set it back to auto

CarlosNZ commented 4 months ago

did you try fiddling with the "scrollHeight" property of HTMLElements? On expand you can get the scrollHeight, set it to that element, then on transitionEnd event you can set it back to auto

Yes, I've been playing round with something like that. I think it's almost working -- the only thing that's tricky is for nodes that are collapsed on load; the first time they're opened we still have to estimate the height for the transition as we can't query their true height until they've finished expanding.

MattChowski commented 4 months ago

you can query an element's true height without having it visible, I noticed all the HTML elements are rendered even if they're collapsed, so if you have a way to target those elements, I am guessing you do, you can just get their scrollHeight and it will give you the elements height even if they're hidden or if they have "height: 0"

CarlosNZ commented 4 months ago

Nah, unfortunately child elements aren't rendered on load if they're hidden. I did this intentionally as it makes quite a big performance improvement when you have a large data set.

I have a solution that is pretty much working which I'll release in a few days. The only slightly clunky part is having to estimate the height of the hidden elements before they've ever been opened. But I've got something that will be imperceptibly different from the true height in 99% of cases, and I can keep refining it over time.

CarlosNZ commented 4 months ago

Done in v1.15.3