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

Question

继这个问题后,我进一步演变了演示消息示例,尝试在两个带有核心列表的页面之间创建页面转换.

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

• 英雄在每个页面上的工厂转换
• 两页上的幻灯片切换(相反方向)
• 无论您在列表中滚动的位置如何,这都可以按预期工作

请注意,点击工厂时页面会发生变化.

我已经取得了一些成功,但是从我的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-fabs移动就像它们通过slide过渡动画一样('因为hero-transition动画元素之间的形状和位置动画,在这种情况下,动画过渡应该看起来与一个相同slide)!那么也许,你根本不需要申请hero-transition？