[React] DataTable: row expansion animation isn't smooth

[freder]

Package

@carbon/react

Browser

Chrome

Package version

1.2.0

React version

17.0.2

Description

https://react.carbondesignsystem.com/?path=/story/components-datatable-expansion--usage

click the row expansion button (v) to open and close the row. observe how the opening animation isn't smooth. -- seems to directly jump to the height of the contained content.

CodeSandbox example

https://react.carbondesignsystem.com/?path=/story/components-datatable-expansion--usage

Steps to reproduce

see description

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

It looks like this is due to the row height being animated open from zero to a calculated/auto value, which can't be interpolated for animation. I'm not sure how we could fix this, there might be a css solution but am not sure.

[joshblack]

This may be what we're running into in terms of transition issues: https://css-tricks.com/using-css-transitions-auto-dimensions/ where the height is going from a 0 value to an auto value (potentially)