Jak dodać przejścia strony do Reakcji bez korzystania z routera?

Question

Próbowałem dodać przejścia strony do mojej aplikacji, używając ReactCSSTransitionGroup, ale to nie zadziałało. Dla niektórych stron działało, ale dla niektórych nie. Wiele przykładów pokazuje, jak to zrobić za pomocą routera React. Ale ponieważ używam Meteora, używam innego routera (FlowRouter).

Oto mój renderowanie metoda:

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

Oto jak próbowałem dodać przejścia:

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

Każdy pomysł jak uczynić tę pracę?

Answer 1

I zorientowaliśmy się! Twoje animacje CSS próbują użyć fadeIn, ale to nie jest własność CSS. Musisz zmienić go na krycie. Podobnie jak:

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

próby definiowania wewnętrzny komponent przed wywołaniem zwrotnym:

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

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