在 state/props 反应运动变化时重新启动动画

Question

我正在尝试使用从 x: -20 到 x: 0 的反应动作来制作面包屑动画。

Folder > SubFolder > Child

问题是，面包屑在第一次渲染时完美呈现动画效果。随后当 props 甚至 state 发生变化时，动画不会更新。这似乎是一个 known bug.

我的问题是，如何 "restart" 动画 state/prop 更改？

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

Answer 1

通过 react-motion，我通过在 Motion 中设置一个独特的 key 道具找到了解决方法，StaggeredMotion 导致它在状态下重新渲染改变。

参考官方仓库this issue。

对于我的情况，我通过将 key 属性设置为面包屑列表的长度来解决它。

<StaggeredMotion
      key={this.props.crumbs.length}
      ...>
    ...
</StaggeredMotion>

在 state/props 反应运动变化时重新启动动画

Restart animation on state/props change in react-motion

javascript

reactjs

react-motion