Collapsible.Content - Animation issue when adding padding

[binhxn]

Hello,

I'm playing around with animation feature on the Collapsible primitive and am experiencing some janky-ness when adding padding to Collapsible.Content. It's smooth when I remove the padding, but I'd like for the padding to be displayed by default.

I'm hoping it's not a bug, but rather a CSS implementation issue on my end, but here's a Codesandbox repro. Thoughts on this? Any feedback would be much appreciative!

[benoitgrelard]

Hey @binhxn, I'm not sure it's a bug per-se as your animations only animate height and opacity, so padding remains as defined until the content unmounts (hence the jump).

I think you have a couple ways you could get around it:

• You could add the padding into your animations (ie. animate it from 0 to 10px and then from 10px to 0) but that might not be the effect you want
• You could add an extra div inside Collapsible.Content which would have the padding on it

Let me know if that helps!

[benoitgrelard]

cc @jjenzz I thought perhaps it was also because his Collapsible.Content doesn't have box-sizing: border-box but even with that. That does improve things a little if you add that (no jump) but it still won't animate the padding part obviously.

[binhxn]

@benoitgrelard The second option is exactly what I wanted, and I can definitely afford the extra div =]. Thank you for your help!