我一直在用 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>