반응 모션의 상태/소품 변경시 애니메이션 다시 시작

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

, 내가 Motion에 고유 key 소품을 설정하여 수정 프로그램을 발견했습니다 StaggeredMotion 상태 변경에 다시 렌더링에 발생합니다.

공식 게시판에 this issue을 참조하십시오.

내 경우에는 key 소품을 탐색 경로 목록의 길이로 설정하여 해결했습니다.

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