Анимация высоты в React Spring не работает
Я оживлял весы с React Spring. Следующее работает отлично:
<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>
Однако, когда я пытаюсь оживить высоту от 0
в auto
это не работает Используя console.log кажется, что style
проп просто возвращается height: 'auto'
без каких-либо переходов.
<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>