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

我覺得會解決問題。