Yönlendiriciyi kullanmadan Reaktive sayfa geçişleri nasıl eklenir?

Question

ReactCSSTransitionGroup'u kullanarak uygulamamıza sayfa geçişleri eklemeyi denedim, ancak çalışmadı. Bazı sayfalar için çalıştı ama bazıları için yoktu. Orada birçok örnek React yönlendirici ile nasıl yapılacağını gösterir. Fakat Meteor kullanıyorum, farklı bir yönlendirici (FlowRouter) kullanıyorum.

İşte benim işlemek var yöntemi:

İşte

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

Ben geçişler eklemek için çalıştı açıklanmıştır:

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

</ReactCSSTransitionGroup> 

css: nasıl bu işi yapmak için

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

fikrin var mı?

Answer 1

Ben bunu anladım! CSS animasyonlarınız, fadeIn kullanmaya çalışıyor ancak bu bir CSS özelliği değil. Onu opaklığa değiştirmelisin. Bunun gibi:

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

dönüş çağrısından önce iç bileşeni tanımlarken deneyin:

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

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