反動で、アニメーションをリセットする方法は？

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> 
) 

私はそれ内の2 <img>、前の画像と次に表示するための別のものを表示するためのいずれかで成分を有します。私は<Motion>とspringを使用して、古い画像のopacityを変更しました。問題は、アニメーションが1回だけ実行され、2回目にユーザーが画像を更新したときに古い画像が常に見えないことです。

レンダリングごとにアニメーションをリセットするにはどうすればよいですか？

Answer 1

TransitionMotionドキュメントに記載されています。TransitionMotionコンポーネントは、コンポーネントのマウントとマウント解除時にコンポーネントをアニメートします。この前提はリアクショントランジショングループと似ていますが、アプローチは全く異なります。

したがって、MotionをTransitionMotionに置き換えて使用するには、&に一意のキー属性を追加します。

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

私はこの問題を解決すると感じます。