具有核心列表内容的动画页面的聚合物核心转换

Question

从 I further evolved the demo messages example 开始尝试在具有核心列表的两个页面之间创建页面转换。

我正在努力实现以下目标：

每个页面上 fabs 的英雄转换
两个页面上的幻灯片切换（方向相反）
无论您滚动到列表的哪个位置，这都能按预期工作

请注意，单击 fab 时页面会发生变化。

我取得了一些成功，但从我的 jsbin.

可以看出，它无法在所有方面正常工作

我怀疑部分问题与调整包裹核心列表的 div 的大小有关。我不知道它们是如何调整这些尺寸的，但我相信它们对过渡效果很重要。

另请注意，保留列表两侧的灵活填充也很重要（类似于真实收件箱中存在的内容）

Answer 1

首先，没有 slide-from-left 转换。您需要删除代码中与之相关的所有内容。

我发现 hero-transition 不适用于 slide-from-right 转换。一种可能的替代方法是，将这两个 paper-fab 包装在另一个 core-animated-pages.

中

    <core-animated-pages id="pages" selected="{{selected}}"
                         transitions="slide-from-right"
                         on-show-snooze="{{showSnooze}}" on-show-inbox="{{showInbox}}"
                         content
                         layout vertical flex>
        <inbox-editor scrolltarget="{{$.panel.scroller}}" flex>
        </inbox-editor>
        <snooze-editor scrolltarget="{{$.panel.scroller}}" flex>
        </snooze-editor>
    </core-animated-pages>
</core-scroll-header-panel>

<core-animated-pages selected="{{selected}}" transitions="hero-transition" style="position:absolute; bottom:48px;">
    <section>
        <paper-fab class="fab-yellow" icon="add" hero hero-id="primary"
                   on-tap="{{showSnooze}}">
        </paper-fab>
    </section>

    <section>
        <paper-fab class="fab-red" icon="done" hero hero-id="primary"
                   on-tap="{{showInbox}}">
        </paper-fab>
    </section>
</core-animated-pages>

请参阅此 jsbin 以供参考。请注意，paper-fab 的移动就像使用 slide 过渡动画一样（因为 hero-transition 对元素之间的形状和位置进行动画处理，在这种情况下，动画过渡看起来应该与一个 slide 个）！那么也许您根本不需要应用 hero-transition？

具有核心列表内容的动画页面的聚合物核心转换

Polymer core transitions for animated pages with core list content

css

polymer