Polymer Chip-to-Card Pattern with core-animated-pages and a Long List

Question

Generally

I'm finding it difficult to use the core-animated-pages Polymer element to implement a chip list to card type pattern when I have a very long list that scrolls the page. I think the difficulty is that once the transition has finished, the hidden portion is taken out of the layout and I'm having a hard time figuring out a way around this.

Easy Illustration

JSFiddle: http://jsfiddle.net/hmknv3jh/

On the output, scroll to the bottom and click a chip, the problem should be obvious.

Details

Make sure you have to scroll to get to a chip toward the bottom and click one. The chip flies off the screen to the top then suddenly the card appears centered and the list behind is gone (along with the scroll bars). Once you click the card, it flies off the screen at the bottom and the list appears again, but you're at the top of the page, not the bottom where you clicked.

Help?

Does anyone know the best way to fix this? Ideally I would like the card to behave like a modal dialog with no movement in the list behind, but still have the nice hero transitions between the chips and card.

Answer 1

To make the transitions work smoothly, you need to first disable the core-animated-pages from scrolling.

core-animated-pages {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

And then of course you need to set the list section to be scrollable again.

<section style="overflow:scroll">
    <div class="chip-container" hero-p on-tap="{{transition}}">

That's it! Please see this JSFiddle for reference.

Answer 2

Your problem is caused by the fact that the script scrolls to the top of the page, which is something you don't really need in that scenario.

core-header-panel provides a scroller property which gives you access to the internal scrolling div. From there, you can use vanilla JS to scroll it (using scrollTop).

document.querySelector('#mainContainer').scroller.scrollTop = 0;