ReactCSSTransitionGroup z modułami CSS

Question

Mam ReactCSSTransitionGroup używam z modułami CSS (i dynamiczne routing z routera reagowania, ale uważam, że działa zgodnie z oczekiwaniami).

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

W appear i leave przejścia działa idealnie - ale enter Przejścia nie - po prostu pojawiają się natychmiast, z poprzedniego składowa wygaszania po nowy składnik został wprowadzony.

CSS (za pomocą CSS modułów):

.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; 
} 

--- EDIT ---

odkryłem, że działa zgodnie z oczekiwaniami na trasach dzieci (mam tylko małą garstkę te w mojej aplikacji). Wszystkie trasy, w tym trasy podrzędne, są ładowane dynamicznie, więc nadal nie jestem pewien, co powoduje, że działa w tych przypadkach, ale nie w innych.

Answer 1

Istnieje wiele błędów z przejściami CSS na poziomie przeglądarki, a każdy typ transformacji ma różne zależności (według docs)

sugestia jest użycie bardziej przyjazne developerom API:

• https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx
• https://github.com/tkafka/react-VelocityTransitionGroup/blob/master/VelocityTransitionGroup.jsx