Polymer core transitions for animated pages with core list content

Question

Following on from this question I further evolved the demo messages example in an attempt to create page transitions between two pages with core-lists.

I'm trying to achieve the following:

• hero transitions on the fabs on each page
• slide transitions (in opposite directions) on the two pages
• this to work as expected no matter where you are scrolled on the lists

Note the pages change when the fabs are clicked.

I've had some success but can't get it to work correctly in all aspects as can be seen from my jsbin.

I suspect part of the problem relates to sizing the divs that wrap the core-lists. I can't figure out how they to size these but I believe they are important to the transition effect.

Note also that the flexible padding on the sides of the lists is also important to preserve (similar to what exists on the real inbox)

Answer 1

First, there's no slide-from-left transition. You will need to remove everything related to it in your code.

I have found that the hero-transition doesn't work well with slide-from-right transition. A possible alternative would be, wrap those two paper-fabs in another 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>

Please see this jsbin for reference. Notice that the paper-fabs move just like they are animated with a slide transition ('cause hero-transition animates the shape and position between elements, in this case, the animation transition should look identical to a slide one)! So maybe, you don't need to apply the hero-transition at all?