As the list component changes in size based on its children, it tends to move around abruptly. Applying transition: 'all 0.3s ease' doesn't resolve this issue since it's the layout that is affected by the number of children rather than the style of the component. However, I attempted to work around this by incorporating it into the styles:
render() {
return (
<div
style={{
width: Object.values(this.props.children).reduce((a,b) => a?.props?.width + b?.props?.width),
transition: 'all 0.3s ease',
...this.props.style
}}
{this.props.children}
</div>
);
}
Unfortunately, my approach didn't yield the desired results. While the width calculation was correct, the transition delay was still not applied. Do you have any insights as to why this might be happening?
Furthermore, are there alternative methods (that actually work) to achieve a smooth transition when adding or removing children from a component?