कोर सूची सामग्री के साथ एनिमेटेड पृष्ठों के लिए पॉलिमर कोर संक्रमण

Question

this question से निम्नलिखित के बाद मैंने कोर-सूचियों के साथ दो पृष्ठों के बीच पृष्ठ संक्रमण बनाने के प्रयास में demo messages example विकसित किया।

मैं निम्नलिखित प्राप्त करने के लिए कोशिश कर रहा हूँ:

इस अपेक्षा के अनुरूप काम करने के लिए कोई दो पृष्ठों पर प्रत्येक पृष्ठ पर

स्लाइड संक्रमण fabs पर

• नायक संक्रमण (विपरीत दिशाओं में) इससे कोई फर्क नहीं पड़ता कि आप सूचियों पर स्क्रॉल किए गए हैं

जब फ़ैब क्लिक किए जाते हैं तो पृष्ठ बदलते हैं।

मुझे कुछ सफलता मिली है लेकिन यह मेरे jsbin से देखे जा सकने वाले सभी पहलुओं में सही तरीके से काम नहीं कर सकता है।

मुझे संदेह है कि समस्या का हिस्सा कोर-सूचियों को लपेटने वाले divs को आकार देने से संबंधित है। मैं यह नहीं समझ सकता कि वे इन्हें कैसे आकार दें लेकिन मेरा मानना ​​है कि वे संक्रमण प्रभाव के लिए महत्वपूर्ण हैं।

भी ध्यान रखें कि सूचियों के किनारों पर लचीला गद्दी भी संरक्षित करने के लिए (क्या असली इनबॉक्स पर मौजूद है के समान)

Answer 1

पहले महत्वपूर्ण है, वहाँ कोई slide-from-left संक्रमण है। आपको अपने कोड में उससे संबंधित सबकुछ हटाने की आवश्यकता होगी।

मुझे पता चला है कि hero-transitionslide-from-right संक्रमण के साथ अच्छी तरह से काम नहीं करता है। एक संभावित विकल्प होगा, उन दो paper-fab एस को core-animated-pages में लपेटें।

<core-animated-pages id="pages" selected="{{selected}}" 
         transitions="slide-from-right" 
         on-show-snooze="{{showSnooze}}" on-show-inbox="{{showInbox}}" 
         content 
         layout vertical flex> 
     <inbox-editor scrolltarget="{{$.panel.scroller}}" flex> 
     </inbox-editor> 
     <snooze-editor scrolltarget="{{$.panel.scroller}}" flex> 
     </snooze-editor> 
    </core-animated-pages> 
</core-scroll-header-panel> 

<core-animated-pages selected="{{selected}}" transitions="hero-transition" style="position:absolute; bottom:48px;"> 
    <section> 
     <paper-fab class="fab-yellow" icon="add" hero hero-id="primary" 
        on-tap="{{showSnooze}}"> 
     </paper-fab> 
    </section> 

    <section> 
     <paper-fab class="fab-red" icon="done" hero hero-id="primary" 
        on-tap="{{showInbox}}"> 
     </paper-fab> 
    </section> 
</core-animated-pages> 

कृपया संदर्भ के लिए यह jsbin देखें। ध्यान दें कि paper-fab की तरह वे slide संक्रमण के साथ एनिमेटेड हैं ('कारण hero-transition तत्वों के बीच आकार और स्थिति को एनिमेट करता है, इस मामले में, एनीमेशन संक्रमण slide एक के समान दिखना चाहिए)! तो शायद, आपको hero-transition को लागू करने की आवश्यकता नहीं है?