具有核心列表内容的动画页面的 Polymer 核心过渡

Question

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

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

• 每个页面上晶圆厂的英雄转换
• 两页上的幻灯片过渡（方向相反）
• 无论您在列表中的哪个位置滚动，它都能按预期工作

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

我已经取得了一些成功，但无法让它在所有方面都正常工作，这可以从我的jsbin 中看出。

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

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

Answer 1

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

我发现hero-transition 不适用于slide-from-right 转换。一种可能的替代方法是将这两个 paper-fabs 包装在另一个 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-fabs 的移动就像使用slide 转换动画一样（因为hero-transition 动画元素之间的形状和位置，在这种情况下，动画转换应该看起来与slide 相同） ！所以也许，你根本不需要申请hero-transition？