Description
The HeightAnimation component calculates the height, and animates from auto to auto – or from 0 to auto in height – powered by CSS transition. It calculates the height on the fly.
When the animation is done, it sets the element's height to auto.
The component can be used as an opt-int replacement instead of vanilla HTML Elements.
The element animation is done with a CSS transition with 400ms in duration.
It also re-calculates and changes the height, when the given content changes.
Accessibility
It is important to never animate from 0 to e.g. 64px – because;
- the content may differ based on the viewport width (screen size)
- the content itself may change
- the user may have a larger
font-size