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

Question

通常

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

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

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

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

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以供参考。