反應動作狀態/道具變化的重新啓動動畫

我正在嘗試使用從x: -20到x: 0的反應動作來製作麪包屑動畫。反應動作狀態/道具變化的重新啓動動畫

Folder > SubFolder > Child

的問題是，麪包屑完美動畫第一渲染。隨後當props甚至state發生變化時，動畫不會更新。這似乎是known bug。

我的問題是，我如何「重新啓動」狀態/道具變化動畫？

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

來源

2016-12-17 sanchit

通過react-motion去，我已經在Motion設置唯一key道具找到了解決，StaggeredMotion它會導致狀態改變重新渲染。

請參考官方回購協議this issue。

對於我的情況，我通過將key prop設置爲breadcrumb列表的長度來解決這個問題。

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

來源

2016-12-20 02:47:46 sanchit

這也解決了我的問題重新動畫的Flash消息。第一次渲染總是很好，但在重新渲染時，動畫不會重置。將'key'prop設置爲'Date.now（）'解決了我的問題，因爲當出現新的閃存信息時，我總是想重新設置動畫。 – SidOfc

反應動作狀態/道具變化的重新啓動動畫

回答

相關問題