Come aggiungere transizioni di pagina a React senza utilizzare il router?

Question

Ho provato ad aggiungere transizioni di pagina alla mia app utilizzando ReactCSSTransitionGroup ma non ha funzionato. Per alcune pagine ha funzionato, ma per alcuni non ha funzionato. Molti esempi là fuori mostrano come farlo con il router React. Ma dal momento che utilizzo Meteor, utilizzo un router diverso (FlowRouter).

Ecco il mio metodo Render:

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

Ecco come ho cercato di aggiungere transizioni:

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

</ReactCSSTransitionGroup> 

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

Qualsiasi idea di come fare questo lavoro?

Answer 1

ho capito! Le animazioni CSS stanno tentando di utilizzare fadeIn, ma non è una proprietà CSS. Devi cambiarlo in opacità. Così:

//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

cercare di definire il componente interno prima chiamata di ritorno:

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

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