5

反応モーション fromx: -20を使用してブレッドクラムをアニメーション化しようとしていx: 0ます。

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

1 に答える 1

10

を調べたところ、 に一意のプロップをreact-motion設定することで修正が見つかりました。これにより、状態の変更時に再レンダリングされます。keyMotionStaggeredMotion

公式リポジトリでこの問題を参照してください。

私の場合、key小道具をパンくずリストの長さに設定することで解決しました。

<StaggeredMotion
      key={this.props.crumbs.length}
      ...>
    ...
</StaggeredMotion>
于 2016-12-20T02:47:46.873 に答える