I've been animating scale with React Spring. The following works fine:
<ul>
{items.map((item, index) => {
if (index === items.length - 1) {
return (
<Spring
key={item.id}
from={{
progress: 0,
}}
to={{
progress: 1,
}}
config={{ delay: 300, duration: 300 }}
>
{({ progress }) => {
const style = { transform: `scale(${progress})` };
return <Item style={style} {...item} />;
}}
</Spring>
);
}
return <Item {...item} />;
})}
</ul>
However when I try and animate height from 0
to auto
it doesn't work. Using console.log it seems that the style
prop just returns height: 'auto'
without any transitions.
<ul>
{items.map((item, index) => {
if (index === items.length - 1) {
return (
<Spring
key={item.id}
from={{
height: 0
}}
to={{
height: 'auto'
}}
config={{ delay: 300, duration: 300 }}
>
{(style) => {
console.log(style)
return <Item style={style} {...item} />;
}}
</Spring>
);
}
return <Item {...item} />;
})}
</ul>