मैं सोच रहा था कि कोई भी React.js के साथ एनिमेटेड घटक/पृष्ठ स्विच को कैसे प्राप्त करें के बारे में कुछ अंतर्दृष्टि प्रदान कर सकता है।प्रतिक्रिया: पृष्ठ स्विच को एनिमेट करना
जो मैं प्राप्त करना चाहता हूं वह http://www.semplicelabs.com/ पर एक घटक/पृष्ठ संक्रमण है - एक हेडर जो अस्पष्टता और मार्जिन-टॉप को बदलता है और एक ऐसी सामग्री जो अस्पष्टता को बदलता है।
जब एक नया घटक/पेज दिखाया गया है, वर्तमान में प्रदर्शित घटक/पृष्ठ की से पहले में नए घटक/पेज संक्रमण प्रारंभ कर देना चाहिए क्या मैं अब तक एक LayoutComponent कि एक CSSTransitionGroup में एक पेज घटक renders है।:
import React from 'react/addons';
export default class LayoutComponent extends React.Component {
constructor(props) {
super(props);
this.state = { page: '' };
},
setPage(page) {
this.setState({ page });
}
render() {
return (
<React.addons.CSSTransitionGroup transitionName='page'>
{this.state.page}
</React.addons.CSSTransitionGroup>
);
}
}
मैं भी दो पृष्ठ के घटकों FirstPage और SecondPage है।
import React from 'react';
export default class FirstPage extends React.Component {
render() {
return (
<div>
<header className='header'>
<div className='container'>
First Header
</div>
</header>
<div className='content'>
<div className='container'>
First Content
</div>
</div>
</div>
);
}
}
SecondPage कोड और FirstPage कोड के बीच अंतर केवल .container divs में सामग्री और कक्षाओं नाम हैं।
मैंने जो करने की कोशिश की है वह .8s अवधि के साथ एक छुट्टी संक्रमण जोड़ें और .8s अवधि और देरी दोनों के साथ एक प्रवेश संक्रमण जोड़ें। मुख्य समस्या जो मैं देखता हूं वह यह है कि पुराने पृष्ठ की छुट्टी संक्रमण समाप्त होने से पहले नया पृष्ठ घटक घुमाया जाता है। यह मेरा वर्तमान सीएसएस है:
.page-enter {
background-color: #f2f2f2;
transition: background-color .8s linear .8s;
}
.page-enter-active {
background-color: #f2f1f1;
}
.page-leave {
background-color: #f2f1f1;
transition: background-color .8s linear;
}
.page-leave-active {
background-color: #f2f2f2;
}
.page-enter .header {
margin-top: -80px;
opacity: 0;
transition: opacity .8s ease-in-out .8s;
transition: margin-top .8s ease-in-out .8s;
}
.page-enter-active .header {
margin-top: 0;
opacity: 1;
}
.page-leave .header {
margin-top: 0;
opacity: 1;
transition: opacity .8s ease-in-out;
transition: margin-top .8s ease-in-out;
}
.page-leave-active .header {
margin-top: -80px;
opacity: 0;
}
.page-enter .content {
opacity: 0;
transition: opacity .8s ease-in-out .8s;
}
.page-enter-active .content {
opacity: 1;
}
.page-leave .content {
opacity: 1;
transition: opacity .8s ease-in-out;
}
.page-leave-active .content {
opacity: 0;
}
मैं जानता हूँ कि मैं प्रारंभिक transitionAppear={true} साथ बढ़ते चेतन सकता है - लेकिन इससे पहले वर्ष एक बाहर का संक्रमण हो जाने घुड़सवार किया जा रहा नए घटक की समस्या से मदद नहीं करता है।
यह एक समस्या है जिसे मैंने कुछ दिनों तक संघर्ष किया है और मुझे कोई समाधान नहीं मिल रहा है।
के साथ चारों ओर खेलने के लिए कुछ कोड: https://jsfiddle.net/gonsfx/xva2g6oo/
क्या आप इसे हल करने में सक्षम हैं? मैं भी इस मुद्दे से फंस गया हूँ। –