Мне сложно использовать элемент core-animated-pages Polymer для реализации списка чипов в шаблон типа карты, когда у меня есть очень длинный список, который прокручивает страницу. Я думаю, что трудность заключается в том, что, как только переход закончен, скрытая часть вынимается из макета, и мне сложно найти способ обойти это.
JSFiddle: http://jsfiddle.net/hmknv3jh/
На выходе прокрутите вниз и щелкните чип, проблема должна быть очевидной.
Удостоверьтесь, что вам нужно прокрутить, чтобы перейти к чипу в нижней части экрана и щелкнуть по нему. Чип вылетает с экрана на верх, а затем карта появляется по центру, а список позади (наряду с полосами прокрутки). Как только вы нажмете на карту, она исчезнет с экрана внизу, и список появится снова, но вы находитесь в верхней части страницы, а не внизу, где вы нажали.
Кто-нибудь знает, как лучше всего это исправить? В идеале я бы хотел, чтобы карта вела себя как модальный диалог без движения в списке позади, но все же у него хорошие переходы героя между чипами и картой.
Чтобы сделать переходы работать гладко, сначала нужно отключить прокрутку core-animated-pages.
core-animated-pages {
overflow: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
И тогда, конечно, вам нужно снова установить прокрутку списка section.
<section style="overflow:scroll">
<div class="chip-container" hero-p on-tap="{{transition}}">
Что это! Для справки смотрите JSFiddle.
Ваша проблема вызвана тем, что script прокручивается до верхней части страницы, что вам действительно не нужно в этом сценарии.
core-header-panel предоставляет свойство scroller, которое дает вам доступ к внутреннему прокручивающему div. Оттуда вы можете использовать vanilla JS для его прокрутки (используя scrollTop).
document.querySelector('#mainContainer').scroller.scrollTop = 0;