我正在尝试使用x: -20
到x: 0
的React-Motion来动画面包屑。
Folder > SubFolder > Child
问题是,面包屑在第一个渲染上完美地动画。随后,当props
甚至state
更改时,动画不会更新。这似乎是一个已知的错误。
我的问题是,如何在状态/道具更改上"重新启动"动画?
const getDefaultStyles = crumbs => {
const defaultStyles = crumbs.map(() => ({x: -20}))
console.log(defaultStyles)
return defaultStyles
}
const getStyles = previousInterpolatedStyles => {
return previousInterpolatedStyles.map((_, i) => {
return i === 0 ? {x: spring(0)} : {x: spring(previousInterpolatedStyles[i-1].x)}
})
}
const Breadcrumb = ({ crumbs }) => (
<div className='breadcrumb-container'>
<StaggeredMotion
defaultStyles={getDefaultStyles(crumbs)}
styles={getStyles}>
{
interpolatedStyles =>
<div className='breadcrumb-list'>
{
interpolatedStyles.map(({x}, i) =>
<div className='breadcrumb' key={i} style={{
WebkitTransform: `translate3d(${x}px, 0, 0)`,
transform: `translate3d(${x}px, 0, 0)`
}}>
<a href='#'>Title</a>
</div>
)
}
</div>
}
</StaggeredMotion>
</div>
)
通过react-motion
,我通过在Motion
中设置唯一的key
Prop找到了解决方案,StaggeredMotion
使其在状态更改上重新呈现。
在官方仓库中请参阅此问题。
对于我的情况,我通过将key
支柱设置为面包屑列表的长度来解决。
<StaggeredMotion
key={this.props.crumbs.length}
...>
...
</StaggeredMotion>