javascript - 在 react 运动中，如何重置动画？

Question

在某个 UI 中，人们可以更新图像，每当他们上传新图像时，我希望之前的图像淡入新图像。问题是动画仅在第一次更改时运行:

return(
  <div>
   <Motion defaultStyle={{opacity: 1}} style={{opacity: spring(0)}}>
     { interpolatedStyle => <img style={interpolatedStyle} src={this.previousSrc/> }
   </Motion>
   <img src={this.props.src} />
  </div>
)

我有一个包含两个 <img> 的组件在其中，一个显示上一张图像，另一个显示下一张图像。我正在使用 <Motion>和 spring更改 opacity旧图像的问题是动画只运行一次，用户第二次更新图像时，旧图像总是已经不可见了。

如何为每次渲染重置动画？

Answer 1

您应该按照文档中的说明使用 TransitionMotion:TransitionMotion 组件在组件安装和卸载时设置动画。前提与 React Transition Group 类似，但方法完全不同。

因此，要使其正常工作，只需将 Motion 替换为 TransitionMotion 并添加一个唯一的键属性即可。

<img style={interpolatedStyle} src={this.previousSrc} key={someUniqueValue} />

我觉得这会解决问题。