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

一般来说

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

简单的插图

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

在输出中，滚动到底部并单击一个芯片，问题应该很明显。

Details

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

Help?

有谁知道解决这个问题的最佳方法？理想情况下，我希望卡片的行为像模态对话框，后面的列表中没有任何移动，但在芯片和卡片之间仍然有很好的英雄转换。

为了使转换顺利进行，您需要首先禁用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 http://jsfiddle.net/hmknv3jh/2/以供参考。