Question

继this question之后，我进一步发展了demo messages example，试图在两个核心列表页面之间创建页面转换。

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

英雄在每个工作站上的过渡
两页上的幻灯片切换（相反方向）
无论您在列表中的哪个位置滚动

请注意，点击工厂时页面会发生变化。

我已经取得了一些成功，但无法从我的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 s移动就像它们使用slide转换动画一样（'因果hero-transition会动画元素之间的形状和位置，在这种情况下，动画过渡看起来应该与一个slide一个）！也许，您根本不需要应用hero-transition？

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

1 个答案: