2017-03-06 113 views
2

我遇到了一個問題,我將動畫應用於父路由,並且子節點繼承相同的動畫。我需要從兒童路線的父路線不同的動畫。任何人都可以幫忙。下面是我在做什麼:反應過渡組

渲染()方法:

const path = this.props.location.pathname; 
const segment = path.split('/')[1] || 'root'; 

回報()方法:

<ReactCSSTransitionGroup 
     transitionName = "fade" 
     transitionEnterTimeout = {750} 
     transitionLeaveTimeout = {250}> 
     {React.cloneElement(this.props.children, {key: segment})} 
</ReactCSSTransitionGroup> 

然後在我的孩子們組成:

<ReactCSSTransitionGroup 
     transitionName = "slide" 
     transitionEnterTimeout = {1000} 
     transitionLeaveTimeout = {1000}> 
     {React.cloneElement(this.props.children, {key: this.props.location.pathname})} 
</ReactCSSTransitionGroup> 

的兒童路線會淡出而不是幻燈片動畫?

+0

我有同樣的問題 - 你有沒有想過這個? –

回答

1

問題是每個孩子的密鑰都完全相同,所以我將路徑用作密鑰,因爲路徑總是不同的。

+0

任何想法如何在React Router v4中實現類似的效果? –