एंड्रॉयड में, साझा तत्व संक्रमण 2 में ठीक उसी दोनों पृष्ठों में मौजूदा एक साथ लिंक करने के लिए जब पृष्ठों संक्रमण, बस gif में एल्बम कला नीचे दिखाया गया है जैसे तत्वों की अनुमति देता है मुझे आश्चर्य है कि कक्षाओं के बीच ReactJS के साथ एक ही तरह के संक्रमण को हासिल करना संभव है। यदि हां, तो कोई उदाहरण? यदि नहीं, jQuery के साथ क्या?साझा ReactJS तत्व संक्रमण का उपयोग
आप इस संक्रमण को लगभग पूरी तरह से सीएसएस transform संपत्ति के साथ कर सकते हैं। प्रतिक्रिया जेएस डोम में हेरफेर करने के बारे में सब कुछ है, लेकिन आपको इसे और अधिक करने की आवश्यकता नहीं है।
एनीमेशन:
उन 1 और 3 में से प्रतिक्रिया के साथ आसान है, इसलिए आपको केवल संक्रमण एनीमेशन की आवश्यकता है। - इन गुणों से संभाला जा सकता है
body {
background-color: #ccc;
}
.card {
width: 150px;
padding: 0;
margin: 0;
background-color: #fff;
position: absolute;
top: 0: left: 0;
z-index: 1;
/* Transition properties mean changes to them are animated */
transition-property: transform;
transition-timing-function: ease-in-out;
transition-duration: 500ms;
transform-origin: top left;
}
.card>img {
width: 150px;
height: 150px;
margin: 0;
padding: 0;
}
.card>.content {
width: 150px;
height: 50px;
background-color: #fff;
margin: 0;
}
/* This is only for the purposes of this demo.
* In production you'd have an underlying grid layout and JS to figure out the position */
.card:nth-of-type(2) {
left: 175px;
}
.card:nth-of-type(3) {
top: 230px;
}
.card:nth-of-type(4) {
top: 230px;
left: 175px;
}
/* On hover transform the card to full size and translate it to the top left
* Note that translate comes before scale. */
.card:nth-of-type(1):hover {
transform: scale(2.1667);
z-index: 2;
}
.card:nth-of-type(2):hover {
transform: translate(-175px, 0) scale(2.1667);
z-index: 2;
}
.card:nth-of-type(3):hover {
transform: translate(0, -230px) scale(2.1667);
z-index: 2;
}
.card:nth-of-type(4):hover {
transform: translate(-175px, -230px) scale(2.1667);
z-index: 2;
}<div class="card">
<img src="http://via.placeholder.com/325/F50057/ffffff">
<div class="content"></div>
</div>
<div class="card">
<img src="http://via.placeholder.com/325/F44336/ffffff">
<div class="content"></div>
</div>
<div class="card">
<img src="http://via.placeholder.com/325/1DE9B6/000000">
<div class="content"></div>
</div>
<div class="card">
<img src="http://via.placeholder.com/325/FFEB3B/000000">
<div class="content"></div>
</div>बुनियादी चाल translate और scale के साथ सीएसएस transform उपयोग करने के लिए है:
यहाँ एक बहुत ही बहुत ही बुनियादी उदाहरण सभी में कोई जे एस उपयोग कर रहा है ग्राफिक्स कार्ड और इसलिए मोबाइल पर भी एनिमेशन चिकनी रखें।
ध्यान दें कि सीएसएस बल्कि बदसूरत है - मैंने इसे ऐसा करने के लिए किया है यह दिखाने के लिए कि यह शुद्ध सीएसएस के साथ किया जा सकता है। प्रैक्टिस में आप कुछ जेएस ऑफसेट गुणों को सेट करने के लिए, एक क्लिक इवेंट को हुक अप करना चाहते हैं।
एक और चाल (जो मैंने यहां नहीं की है) एनीमेशन को पीछे की ओर स्केल करना है - पूर्ण से शुरू करें आकार नियंत्रण और translate/scale यह उस स्थिति में नीचे है जो इसे शुरू करने के लिए प्रतीत होता है।कि एनीमेशन शुरू करने से पहले पूर्ण आकार वस्तु के डोम पुनर्गणना के लिए होने से ब्राउज़र की बचत होती है - जब उस पर उपयोगकर्ता क्लिक transform को हटा दें।
यह बहुत अच्छा है! हालांकि यह मेरी जरूरतों के अनुरूप नहीं है। प्रतिक्रियाओं में आइटम के साथ सूची और ध्यान केंद्रित आइटम दो अलग-अलग घटक हैं, इसलिए मैं इसे आसानी से नहीं कर सकता, जैसा कि आपके उदाहरण में दिखाया गया है। – Lucio
@ लुसियो आप कर सकते हैं, एनीमेशन आइटम घटक में स्वैप करने के लिए आपको एक अतिरिक्त कदम की आवश्यकता है। या आप आइटम घटक को विस्तारित विस्तार और सूची दृश्य दोनों को संभालते हैं और फिर यह संक्रमण करता है। किसी भी मामले में, इस तरह आप वेब में इस तरह के संक्रमण करते हैं। – Keith
मुझे यकीन है कि अगर मैं सवाल सही ढंग से समझ क्योंकि मैं एंड्रॉयड ढांचे से अनजान हूँ नहीं हूँ।
कदम::
CurrentMode & NextMode यहाँ मेरी समाधान ReactJS ज्ञान के आधार पर है। संभावित मान 1 & 2 हैं।NextMode2 लिए बदल जाते हैं। और कोड में CurrentMode & NextMode के मूल्यों की तुलना करें। यदि CurrentMode < NextMode तदनुसार आकार सेट करने के बजाय।CurrentMode>NextMode आकार अनुसार सेट की तुलना में।
आपके द्वारा दिखाया गया लेनदेन HTML5/css3 में एक तत्व संक्रमण (छवि + संगीत प्लेयर) का उपयोग करके प्राप्त किया जाना चाहिए जबकि प्रतिक्रियाएं संगीत प्लेयर उप-तत्व की सामग्री परिवर्तन को प्रबंधित कर सकती हैं। ताकि आपको प्रतिक्रिया –
में शेयर तत्व ट्रांसलेशन विकल्प खोजने की आवश्यकता न हो, तो सीधे अपने प्रश्न का उत्तर देने के लिए, आपने https://facebook.github.io/react/docs/animation.html#high-level-api- reactcsstransitiongroup? –
@ChrisChen पहले से ही यह जाँच, मुझे लगता है कि मैं अपने ही साझा तत्वों संक्रमण प्रणाली बनाने के लिए जा रहा हूँ। इस बीच अगर किसी को पुस्तकालय मिल जाता है जो पहले से ही करता है, तो कृपया इसे यहां लिंक करें। – Lucio