ルータを使わずにReactにページ遷移を追加するには？

Question

ReactCSSTransitionGroupを使ってページ遷移を自分のアプリに追加しようとしましたが、動作しませんでした。いくつかのページでは機能しましたが、一部のページでは機能しませんでした。そこには多くの例がありますが、これはReactルーターでどのように行うかを示しています。しかし、私はMeteorを使用しているので、私は別のルータ（FlowRouter）を使用します。

ここに私のrenderメソッドです：

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

</ReactCSSTransitionGroup> 

CSSを：：

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

は、ここで私はトランジションを追加しようとした方法です

//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> 
    ); 
    }