Przejścia z polimerowego rdzenia dla animowanych stron z treścią spisu treści

Question

Po zmianie z this question rozwinąłem dalej demo messages example, próbując utworzyć przejścia między dwiema stronami z listami podstawowymi.

Próbuję osiągnąć następujące:

• bohater przejścia na FAB na każdej stronie
• przejścia slajdów (w przeciwnych kierunkach) na obu stronach
• to nie działa zgodnie z oczekiwaniami w przypadku przewijania na listach:

Uwaga strony zmieniają się po kliknięciu fabs.

Odniosłem pewien sukces, ale nie udało mi się sprawić, aby działało poprawnie we wszystkich aspektach, co można zobaczyć z mojego jsbin.

Podejrzewam, że część problemu dotyczy doboru elementów div, które zawijają listy podstawowe. Nie wiem, jak to zmienić, ale uważam, że są one ważne dla efektu przejścia.

Należy również zauważyć, że elastyczna wyściółka na bokach listach jest również ważne, aby zachować (podobny do tego, co istnieje w realnym skrzynce)

Answer 1

Po pierwsze, nie ma slide-from-left przejście. Będziesz musiał usunąć wszystko, co jest związane z tym kodem.

Znalazłem, że hero-transition nie działa dobrze z przejściem slide-from-right. Możliwą alternatywą byłoby zawarcie tych dwóch paper-fab s w innym 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> 

proszę zobaczyć jsbin celach informacyjnych. Zauważ, że ruchy paper-fab są animowane przejściem slide (ponieważ hero-transition animuje kształt i położenie między elementami, w tym przypadku przejście do animacji powinno wyglądać identycznie jak przejście slide)! Więc może nie musisz w ogóle stosować kodu hero-transition?