On react-motion，如何重置动画？

Question

在某个用户界面中，只要用户上传新图像，我希望前一个图像淡入新图像，就可以更新图像。问题是，动画只对第一个变化运行：

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类似，但方法完全不同。

因此，它只是用TransitionMotion &替换Motion添加一个唯一的键属性。

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

我觉得会解决问题。