라우터를 사용하지 않고 React에 페이지 전환을 추가하는 방법은 무엇입니까?

Question

ReactCSSTransitionGroup을 사용하여 내 앱에 페이지 전환을 추가하려고했지만 작동하지 않았습니다. 일부 페이지에서는 작동했지만 일부에서는 작동하지 않았습니다. 많은 예제가 React 라우터에서 수행하는 방법을 보여줍니다. 그러나 Meteor를 사용하기 때문에 다른 라우터 (FlowRouter)를 사용합니다.

여기 내 렌더링의 방법

여기

render() { 
    return (
    <div> 
     {this.props.content()} 
    </div> 
); 
} 

내가 전환을 추가하려고 방법은 다음과 같습니다

<ReactCSSTransitionGroup 
    transitionName="pageTransition" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300} 
    transitionAppear={true} 
    transitionAppearTimeout={500} 
> 
    {/* Content */} 
    {React.cloneElement(this.props.content(), { 
    key: uuid.v1(), 
    })} 

</ReactCSSTransitionGroup> 

는 CSS : 어떻게이 일을하는

//Page transition 
.pageTransition-enter { 
    opacity: 0.01; 
} 
.pageTransition-enter.pageTransition-enter-active { 
    animation: fadeIn 1s ease-in; 
} 
.animation-leave { 
    opacity: 1; 
} 
.pageTransition-leave.pageTransition-leave-active { 
    animation: fadeIn 3s ease-in; 
} 
.pageTransition-appear { 
    opacity: 0.01; 
} 
.pageTransition-appear.pageTransition-appear-active { 
    animation: opacity 5s ease-in; 
} 

어떤 생각?

Answer 1

내가 그것을 알아 냈어! CSS 애니메이션이 fadeIn을 사용하려하지만 CSS 속성이 아닙니다. 불투명도로 변경해야합니다. 좋아요 :

//Page transition 
.pageTransition-enter { 
    opacity: 0.01; 
} 
.pageTransition-enter.pageTransition-enter-active { 
    animation: opacity 1s ease-in; 
} 
.animation-leave { 
    opacity: 1; 
} 
.pageTransition-leave.pageTransition-leave-active { 
    animation: opacity 3s ease-in; 
} 
.pageTransition-appear { 
    opacity: 0.01; 
} 
.pageTransition-appear.pageTransition-appear-active { 
    animation: opacity 5s ease-in; 
} 

Answer 2

는 반환 호출하기 전에 내부 구성 요소를 정의하려고 :

render() { 
    const clonedElement = <div>{this.props.content()}</div>; 

    return (
     <ReactCSSTransitionGroup transitionName="pageTransition" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppear={true} transitionAppearTimeout={500}> 
      {clonedElement} 
     </ReactCSSTransitionGroup> 
    ); 
    }