Css 在聚合物中实现瓦片级联页面转换的要求

我已经玩了一段时间了，但是有人能解释一下在聚合中使用tile cascade页面转换的要求吗？当我查看转换代码时，我看到以下内容：

polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-   type(2)'; }
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}

polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(3)'; }
:host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}

我相信这告诉我们标记应该由什么组成（即：它在具有

tile cascade

属性的元素后面寻找

div

s，但我不确定是否遗漏了其他要求。我附上了Chrome开发工具中的一些代码的屏幕截图，希望它能在某些上下文中得到验证

---

根据我的经验，你需要做三件事

人们经常忘记包含

平铺层叠

动画的参考。因此，请确保元素顶部有

无法将

平铺层叠

属性应用于

核心动画页面的直接子级

。请将其应用于下一级容器

您的

核心动画页面

需要在

转换

属性中包含

平铺层叠

为了演示第2点和第3点，我有一段在我的项目中正常工作的代码

<core-animated-pages selected="{{ $.tabs.selected }}" transitions="tile-cascade" notap fit>
    <section>
        <core-selector tile-cascade>
            <div class="portal-item">
                <div class="tile"></div>
            </div>
            <div class="portal-item">
                <div class="tile"></div>
            </div>
            <div class="portal-item">
                <div class="tile"></div>
            </div>
            <div class="portal-item">
                <div class="tile"></div>
            </div>

<core-animated-pages transitions="cross-fade tile-cascade">
    <section>
        <div class="container" horizontal layout center-justified wrap cross-fade tile-cascade>
            <template repeat="{{item in hierarchyItems}}">
                <!-- you need this div here otherwise the tile-cascade animation doesn't work! -->
                <div>
                    <my-element></my-element>
                </div>
            </template>
        </div>
    </section>