css - 具有核心动画页面和长列表的 polymer 芯片到卡片模式

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供引用。