首页 文章

在react-motion上，如何重置动画？

提问于
浏览 次
1

在某个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 ，问题是动画只运行一次，第二次用户更新图像时旧图像始终不可见 .

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

javascript reactjs react-motion

1 回答

  • 1

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

    因此，只需将Motion替换为TransitionMotion并添加唯一的键属性即可 .

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

    我觉得这样可以解决问题 .

    回复于

相关问题