css - 让 tile-cascade 页面转换在 polymer 中工作的要求

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:它在具有 tile-cascade 属性的元素之后寻找 div，但我'我不确定我是否遗漏了其他要求。我附上了 Chrome 开发工具中一些代码的屏幕截图，希望它能证明一些上下文

Answer 1

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

1. 人们经常忘记包含 tile-cascade 的引用动画片。所以确保你有 <link rel="import" href="../bower_components/core-animated-pages/transitions/tile-cascade.html">在你的元素之上。

2. 您不能应用 tile-cascade归属于你的直系 child core-animated-pages .应用到下一级容器。

3. 你的 core-animated-pages需要包括 tile-cascade在transitions属性。

为了演示第 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 中已经提到的，每个图 block 元素都需要用 div 包裹起来.

假设您使用的是 template要遍历图 block ，您需要用 div 包裹模板中的任何内容否则 tile-cascade不会工作(有趣的是，list-cascade 动画不需要 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>