再起動アニメーション/小道具が反応し、運動の変化

Question

私が反応し、運動をx: -20からx: 0まで使用してパン粉をアニメーション化しようとしています。

Folder > SubFolder > Child

問題はパン粉が最初のレンダリングに完全にアニメーション化、です。その後ときpropsあるいはstate変更は、アニメーションは更新されません。これはknown bugのようです。

私の質問は、どのように私は状態/小道具の変化にアニメーションを「再起動」しますか？ react-motionを通って行く

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

、私はそれが状態変化に再レンダリングする原因StaggeredMotion、Motionにユニークkey小道具を設定することで修正を発見しました。

は公式レポでthis issueを参照してください。私の場合のために

私は、ブレッドクラムリストの長さにkey小道具を設定することで、それを解決しました。

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