具有核心动画页面和长列表的聚合物芯片到卡片模式

Question

一般

当我有一个滚动页面的很长的列表时，我发现很难使用core-animated-pages Polymer元素来实现芯片列表到卡片类型模式。我认为困难在于，一旦转换完成，隐藏部分就会从布局中取出，我很难找到解决方法。

简单插图

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

在输出上，滚动到底部并单击芯片，问题应该是显而易见的。

详细

确保您必须滚动才能到达底部的芯片并单击一个。芯片从屏幕飞到顶部，然后突然卡片显示在中央，后面的列表消失了（连同滚动条）。单击该卡后，它会从底部的屏幕上飞出，然后再次显示列表，但您位于页面顶部，而不是您单击的底部。

帮助？

有谁知道解决此问题的最佳方法？理想情况下，我希望该卡的行为类似于模式对话框，后面的列表中没有移动，但仍然在芯片和卡之间有很好的英雄过渡。

Answer 1

要使转换顺利进行，您需要先禁用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以供参考。

Answer 2

您的问题是由于脚本滚动到页面顶部这一事实引起的，这是您在该场景中不需要的。

core-header-panel提供scroller property，可让您访问内部滚动div。从那里，您可以使用vanilla JS滚动它（使用scrollTop）。

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