रिएक्ट ट्रांज़िशनमोशन का उपयोग कैसे करें()

Question

React Motion's TransitionMotion का उपयोग करके, मैं 1 या अधिक बॉक्स को अंदर और बाहर एनिमेट करना चाहता हूं। जब कोई बॉक्स दृश्य में प्रवेश करता है, तो इसकी चौड़ाई और ऊंचाई 0 पिक्सल से 200 पिक्सल तक होनी चाहिए और इसकी अस्पष्टता 0 से 1 तक होनी चाहिए। जब ​​बॉक्स दृश्य को छोड़ देता है, तो विपरीत होना चाहिए (चौड़ाई/ऊंचाई = 0, अस्पष्टता = 0)

मैंने इस समस्या को हल करने का प्रयास किया है http://codepen.io/danijel/pen/RaboxO लेकिन मेरा कोड बॉक्स को सही तरीके से परिवर्तित करने में असमर्थ है। बॉक्स की शैली में संक्रमण के बजाय 200 पिक्सल की चौड़ाई/ऊंचाई पर तुरंत कूदता है।

कोड के साथ क्या गलत है?

let Motion = ReactMotion.Motion 
let TransitionMotion = ReactMotion.TransitionMotion 
let spring = ReactMotion.spring 
let presets = ReactMotion.presets 

const Demo = React.createClass({ 
    getInitialState() { 
    return { 
     items: [] 
    } 
    }, 
    componentDidMount() { 

    let ctr = 0 

    setInterval(() => { 
     ctr++ 
     console.log(ctr) 
     if (ctr % 2 == 0) { 
     this.setState({ 
      items: [{key: 'b', width: 200, height: 200, opacity: 1}], // fade box in 
     }); 
     } else { 
     this.setState({ 
      items: [], // fade box out 
     }); 
     } 

    }, 1000) 
    }, 
    willLeave() { 
    // triggered when c's gone. Keeping c until its width/height reach 0. 
    return {width: spring(0), height: spring(0), opacity: spring(0)}; 
    }, 

    willEnter() { 
    return {width: 0, height: 0, opacity: 1}; 
    }, 

    render() { 
    return (
     <TransitionMotion 
     willEnter={this.willEnter} 
     willLeave={this.willLeave} 
     defaultStyles={this.state.items.map(item => ({ 
      key: item.key, 
      style: { 
      width: 0, 
      height: 0, 
      opacity: 0 
      }, 
     }))} 
     styles={this.state.items.map(item => ({ 
      key: item.key, 
      style: { 
      width: item.width, 
      height: item.height, 
      opacity: item.opacity 
      }, 
     }))} 
     > 
     {interpolatedStyles => 
      <div> 
      {interpolatedStyles.map(config => { 
       return <div key={config.key} style={{...config.style, backgroundColor: 'yellow'}}> 
       <div className="label">{config.style.width}</div> 
       </div> 
      })} 
      </div> 
     } 
     </TransitionMotion> 
    ); 
    }, 
}); 

ReactDOM.render(<Demo />, document.getElementById('app')); 

Answer 1

TransitionMotion धारा के तहत

documentationstyles की के अनुसार (और मैं दावा नहीं करते हैं पूरी तरह से इसके बारे में सब समझ में आ करने के लिए है :)):

शैलियों: ... एक सरणी TransitionStyle की ...

यहाँ ध्यान दें करने के लिए महत्वपूर्ण बात यह है कि शैली वस्तुओं के 2 प्रकार है कि इस पुस्तकालय देखते हैं कि है (या कम से कम यह TransitionMotion हिस्सा) से संबंधित है और यह उन्हें TransitionStyle और TransitionPlainStyle कहता है।

पिछले मान styles विशेषता में उत्तीर्ण TransitionPlainStyle थे। उन्हें TransitionStyleजादुई पर बदलकर Enter अनुक्रम एनिमेट करना प्रारंभ होता है।

आप here से ऊपर वर्णित 2 अलग-अलग प्रकारों को और अधिक पढ़ सकते हैं।

styles={this.state.items.map(item => ({ 
    key: item.key, 
    style: { 
    width: spring(item.width), 
    height: spring(item.height), 
    opacity: spring(item.opacity) 
    } 
}))} 

Forked codepen demo।

फिर से, मैं अभी तक इसके आंतरिक कार्यों को पूरी तरह से समझ नहीं पा रहा हूं। मुझे पता है कि इसे बनाने के लिए उपरोक्त तरीके से आपके styles को बदला जाना था।

अगर कोई मुझे इस पर भी शिक्षित कर सकता है तो मुझे खुशी होगी।

उम्मीद है कि इससे मदद मिलती है।