在反应运动中，如何重置动画？

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} />

我觉得这会解决问题。

在反应运动中，如何重置动画？

On react-motion, how to reset an animation?

javascript

reactjs

react-motion