当道具改变时反应 spring 淡入淡出图像 in/out

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

当道具改变时反应 spring 淡入淡出图像 in/out

React spring fade images in/out when prop changes

javascript

reactjs

react-spring