道具变化时，反作用弹簧淡入/淡出图像

Question

我有一个产品瓦片组件，它接受imageSrc道具。每当更新imageSrc道具时，我都希望旧图像随着新图像的淡入而淡出。在我当前的实现中，动画不起作用。我可以确认imageSrc正在正确更新，但图像会立即更新，没有动画。我怎样才能让这个动画发挥作用？

const imageTransition = useTransition(imageSrc, item => item.key, {
from: {
opacity: 0,
width: "100%",
},
enter: {
opacity: 1,
},
leave: { 
opacity: 0 
},
});
{imageTransition.map(({ item, props, key }) => (
<animated.img style={props} key={key} src={imageSrc}></animated.img>
))}

Answer 1

您应该在render方法中使用项，而不是图像src。

{imageTransition.map(({ item, props, key }) => (
<animated.img style={props} key={key} src={item}></animated.img>
))}

更新：

我创建了一个工作示例：https://codesandbox.io/s/animated-image-change-component-sy6vu