当道具改变时反应弹簧淡入/淡出图像答案

【问题标题】：React spring fade images in/out when prop changes当道具改变时反应弹簧淡入/淡出图像
【发布时间】：2020-12-04 15:10:46
【问题描述】：

我有一个接受 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>
  ))}

【问题讨论】：

标签： javascript reactjs react-spring

【解决方案1】：

你应该在 render 方法中使用 item 而不是 image 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

【讨论】：