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

通常

当我有一个非常长的列表滚动页面时，我发现使用核心动画页面聚合物元素难以实现芯片列表到卡片类型模式。我认为困难是一旦过渡完成，隐藏的部分就从布局中取出，我很难想出一个办法。

简易插图

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

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

细节

确保您必须滚动到底部的芯片，然后单击一个。芯片从屏幕上方飞溅到顶部，然后突然出现卡片中心，后面的列表已经消失(与滚动条一起)。一旦您点击卡片，它会从底部的屏幕上飞过，列表再次出现，但您位于页面顶部，而不是您点击的底部。

帮帮我？

有没有人知道解决这个问题的最佳方法？理想情况下，我希望卡片表现得像一个模式对话框，在列表中没有移动，但是在芯片和卡片之间仍然有很好的英雄转换。

解决方法

要使转换顺利进行，您需要首先禁用滚动的核心动画页面。

core-animated-pages {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

那么当然你需要将列表部分重新设置为可滚动。

<section style="overflow:scroll">
    <div class="chip-container" hero-p on-tap="{{transition}}">

而已！请参阅JSFiddle作为参考。

原文地址：https://www.jb51.cc/css/218182.html