1

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

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旧图像，问题是动画只运行一次，第二次用户更新图像时，旧图像总是不可见的。

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

4

1 回答 1

1

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

所以要让它工作，只需用 TransitionMotion 替换 Motion 并添加一个唯一的关键属性。

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

我觉得这会解决问题。

于 2017-08-01T17:27:54.240 回答