继
this question之后,我进一步发展了
demo messages example,尝试使用核心列表在两个页面之间创建页面转换.
我正在努力实现以下目标：
>英雄在每个页面上的工厂转换
>在两页上滑动过渡(相反方向)
>无论您在列表中滚动的位置如何,这都可以按预期工作
请注意,点击工厂时页面会发生变化.
我已经取得了一些成功,但从我的jsbin可以看出,无法让它在所有方面正常工作.
我怀疑问题的一部分与调整包装核心列表的div的大小有关.我无法弄清楚他们如何调整这些尺寸,但我相信它们对过渡效果非常重要.
另请注意,列表两侧的灵活填充对于保留也很重要(类似于真实收件箱中存在的内容)
解决方法
首先,没有从左向左滑动的过渡.您需要在代码中删除与其相关的所有内容.
我发现英雄转换不适用于从右向滑动过渡.一种可能的替代方案是,将这两个纸制工厂包装在另一个核心动画页面中.
<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以供参考.请注意,纸张工厂的移动就像它们通过幻灯片转换动画一样(因为英雄转换动画了元素之间的形状和位置,在这种情况下,动画过渡应该看起来与幻灯片相同)！那么也许,你根本不需要应用英雄过渡？
