ReactCSSTransitionGroup與CSS模塊

我有一個ReactCSSTransitionGroup我正在使用CSS模塊（和動態路由從反應路由器，但我相信這是按預期工作）。ReactCSSTransitionGroup與CSS模塊

<ReactCSSTransitionGroup 
    component="div" 
    transitionName={transitions} 
    transitionAppear 
    transitionAppearTimeout={1000} 
    transitionEnterTimeout={2000} 
    transitionLeaveTimeout={2000} 
> 
    {React.cloneElement(this.props.children, { 
    key: location.pathname, 
    })} 
</ReactCSSTransitionGroup>

的appear和leave過渡完美地工作 - 但enter轉變沒有 - 他們只是立即出現，與以前的組件淡出新的組件已進入後。

（使用CSS模塊）的CSS：

.enter { 
    opacity: 0.01; 
} 

.enter.enterActive { 
    opacity: 1; 
    transition: opacity 500ms ease-in; 
} 

.leave.leaveActive { 
    opacity: 0.01; 
    transition: opacity 2000ms ease-in; 
} 

.appear { 
    opacity: 0.1; 
    transition: opacity 1000ms ease-out; 
} 

.appearActive { 
    opacity: 1; 
    transition: opacity 1000ms ease-out; 
}

---編輯---

我發現，它適用於子路由預期（我只有一小撮那些在我的應用程序）。包括子路由在內的所有路由都是動態加載的，所以我仍然不確定是什麼原因導致它在這些情況下工作，而在其他情況下則不能。

來源

2016-09-26 Toby

這裏試試這個小提琴，我改變了.enter.enteractive時間2000 HTTPS： //jsfiddle.net/dcfsyre2/所以你能解釋你面臨的問題嗎？或者你可以張貼小提琴並解釋問題 –

我懷疑這是因爲你導入你的CSS樣式的位置。嘗試在某些根模塊中導入您的css文件，以儘可能早地生效。 –

ReactCSSTransitionGroup與CSS模塊

回答

相關問題