राउटर का उपयोग किये बिना प्रतिक्रिया के लिए पृष्ठ संक्रमण कैसे जोड़ें?

Question

मैंने ReactCSSTransitionGroup का उपयोग करके अपने ऐप में पेज संक्रमण जोड़ने की कोशिश की लेकिन यह काम नहीं किया। कुछ पृष्ठों के लिए यह काम किया लेकिन कुछ के लिए यह नहीं था। वहां कई उदाहरण दिखाते हैं कि इसे रेक्ट राउटर के साथ कैसे किया जाए। लेकिन चूंकि मैं उल्का का उपयोग करता हूं, इसलिए मैं एक अलग राउटर (फ्लोराउटर) का उपयोग करता हूं।

यहाँ मेरी प्रस्तुत करना है विधि:

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> 

सीएसएस:

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

मैं यह पता लगा! आपके सीएसएस एनिमेशन फीडइन का उपयोग करने की कोशिश कर रहे हैं, लेकिन यह एक सीएसएस संपत्ति नहीं है। आपको इसे अस्पष्टता में बदलने की जरूरत है। इस तरह:

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