प्रतिक्रिया राउटर

Question

में मार्गों के बीच एनिमेट/संक्रमण का सही तरीका क्या है मैं प्रतिक्रिया-राउटर में मार्गों के बीच एनिमेटिंग के लिए दस्तावेज़ ढूंढने का प्रयास कर रहा था।

मुझे निम्नलिखित issue पर कुछ चर्चा है। टिप्पणियों के अंत में, मुझे लगता है कि लुलिज ने एक बहुत अच्छा example

तो ... क्या यह प्रतिक्रिया प्रतिक्रिया राउटर में मार्गों के बीच एनिमेट करने का सही/अनुशंसित तरीका है? क्या यह मार्गों के बीच एक संक्रमण का कारण बनता है इससे कोई फर्क नहीं पड़ता कि मार्ग, छवियों, पाठ में कौन सी सामग्री प्रदर्शित होती है?

नोट: यह मेरे लिए काम के तरह प्रतीत होता है, लेकिन संक्रमण की चिकनाई कितना डेटा प्रत्येक मार्ग के बीच भरी हुई है पर निर्भर करने लगता है।

जे एस

// the key part in your top level route/component e.g. Layout.js 
// where you wrap the RouteHandler in the TransitionGroup 

import React from 'react/addons' 
let TransitionGroup = React.addons.CSSTransitionGroup; 
let { RouteHandler, Link } = require('react-router') 

<TransitionGroup component="div" transitionName="page-transition"> 
    <RouteHandler {...this.props} /> 
</TransitionGroup> 

सीएसएस

.page-transition-enter { 
    -webkit-transition: opacity 0.3s ease-in-out; 
      transition: opacity 0.3s ease-in-out; 
    opacity: 0; 
    position: absolute; 
} 
.page-transition-enter.page-transition-enter-active { 
    opacity: 1; 
} 
.page-transition-leave { 
    -webkit-transition: opacity 0.3s ease-in-out; 
      transition: opacity 0.3s ease-in-out; 
    opacity: 1; 
    position: absolute; 
} 
.page-transition-leave.page-transition-leave-active { 
    opacity: 0; 
} 

Answer 1

हाँ, आप इसे सही तरीके से कर रहे हैं। <RouteHandler/> घटक पर एक अद्वितीय key विशेषता निर्दिष्ट करना सुनिश्चित करें। मार्ग का नाम आम तौर पर एक अच्छा विकल्प है।

Answer 2

किसी भी व्यक्ति के पास आने के बाद, अब Add Ons/Animation section के तहत रिएक्ट जिथब दस्तावेज़ पर एनीमेशन के लिए प्रलेखन है।

मूल प्रश्न में कोड दस्तावेज में लगभग समान है, अपवाद के साथ कि दस्तावेज़ीकरण (नीचे) के उदाहरण में संक्रमण टाइमआउट भी शामिल है, जो अनुशंसित है।

ऐड-ऑन:

<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
     {items} 
    </ReactCSSTransitionGroup> 

जानकारी के लिए transitionEnterTimeout और transitionLeaveTimeout गुण में पहुंचे प्रतिक्रिया 0.14, वहाँ 0.14 Release Notes में उनके बारे में एक छोटी राशि अधिक है विश्वसनीयता में सुधार करने के लिए, 'CSSTransitionGroup 'अब संक्रमण घटनाओं को सुनेंगे। इसके बजाय, आपको 'transitionEnterTimeout = {500}' जैसे प्रोप का उपयोग करके मैन्युअल रूप से संक्रमण अवधि निर्दिष्ट करना चाहिए।

Answer 3

रिएक्ट राउटर v4 के परिचय के साथ, यह बहुत आसान हो गया है। अब हम एचओसी का उपयोग कर आरआरवी 4 के भीतर संक्रमण कर सकते हैं।

मेरे पास जिथब/यूट्यूब पर एक vid और कोड है।

https://www.youtube.com/watch?v=MiOqASZnKqA

https://github.com/gpltaylor/react-router-workshop/

मुझे आशा है कि यह आप के लिए उपयोगी है। @gpltaylor