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 t

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?