使tile-cascade页面转换在聚合物中工作的要求

Question

我已经玩了一段时间了，但是有人可以解释一下将tile-cascade页面转换为在Polymer中工作的要求是什么？当我看一下转换代码时，我看到以下内容：

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;
}

我相信这告诉我们应该做什么标记（IE：它在具有div属性的元素之后寻找tile-cascade s，但我不确定我是否缺少其他要求。我附上了Chrome开发工具的一些代码的屏幕截图，希望它能证明一些上下文

Answer 1

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

1. 人们经常忘记包含tile-cascade动画的参考。因此，请确保您的元素之上有<link rel="import" href="../bower_components/core-animated-pages/transitions/tile-cascade.html">。

2. 您无法将tile-cascade属性应用于core-animated-pages的直接子项。将它应用到下一级容器。

3. 您的core-animated-pages需要在tile-cascade属性中加入transitions。

展示第2点和第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>

<强>更新  4.正如OP 中已经提到的，每个tile元素都需要被div包裹。

假如您使用template遍历切片，则需要使用div将模板内的任何内容包裹起来，否则tile-cascade无法工作（有趣的是，list-cascade动画可以在不需要div包装器的情况下工作。 e.g。

<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>