16

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.

Community
  • 1
  • 1
Shaun
  • 1,485
  • 2
  • 15
  • 21
  • I have exactly the same problem. Did you find some solution? – zdarsky.peter Jan 18 '15 at 12:37
  • @zdarsky.peter I was working on a UI with a "click to enlarge fullscreen" effect. It is not finished yet but you can see an approach to it in [this pen](http://codepen.io/web-tiki/pen/GgqdEN). It uses plain CSS and jQuery. – web-tiki Jan 19 '15 at 15:16
  • Jquery is not a solution in this case – zdarsky.peter Jan 29 '15 at 17:49
  • Is there some reason you haven't actually tried making a modal dialog? This could certainly solve the problem as you suggest. If you need a viable solution, I'll gladly provide. (no jquery required) – Fuzzical Logic Feb 01 '15 at 08:56
  • I'm really just interested in learning how to use the core-animated-pages properly in a case like this rather than actually solve this problem. Could you give an example or explanation of how to do so with a modal dialog? – Shaun Feb 02 '15 at 23:39

2 Answers2

3

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.

Justin XL
  • 38,763
  • 7
  • 88
  • 133
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;
George Katsanos
  • 13,524
  • 16
  • 62
  • 98