[英]Polymer core transitions for animated pages with core list content
Following on from this question I further evolved the demo messages example in an attempt to create page transitions between two pages with core-lists. 继这个问题后,我进一步演变了演示消息示例 ,试图在两个带有核心列表的页面之间创建页面转换。
I'm trying to achieve the following: 我正在努力实现以下目标:
Note the pages change when the fabs are clicked. 请注意,点击工厂时页面会发生变化。
I've had some success but can't get it to work correctly in all aspects as can be seen from my jsbin . 我已经取得了一些成功,但是从我的jsbin可以看出,无法让它在所有方面正常工作。
I suspect part of the problem relates to sizing the divs that wrap the core-lists. 我怀疑问题的一部分与调整包装核心列表的div的大小有关。 I can't figure out how they to size these but I believe they are important to the transition effect. 我无法弄清楚他们如何确定这些尺寸,但我相信它们对过渡效应非常重要。
Note also that the flexible padding on the sides of the lists is also important to preserve (similar to what exists on the real inbox) 另请注意,列表两侧的灵活填充对于保留也很重要(类似于真实收件箱中存在的内容)
First, there's no slide-from-left
transition. 首先,没有slide-from-left
过渡。 You will need to remove everything related to it in your code. 您需要在代码中删除与其相关的所有内容。
I have found that the hero-transition
doesn't work well with slide-from-right
transition. 我发现hero-transition
不适合slide-from-right
向slide-from-right
过渡。 A possible alternative would be, wrap those two paper-fab
s in another core-animated-pages
. 一种可能的替代方案是,将这两个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>
Please see this jsbin for reference. 请参阅此jsbin以供参考。 Notice that the paper-fab
s move just like they are animated with a slide
transition ('cause hero-transition
animates the shape and position between elements, in this case, the animation transition should look identical to a slide
one)! 请注意, paper-fab
的移动就像它们通过slide
过渡动画一样(因为hero-transition
动画了元素之间的形状和位置,在这种情况下,动画过渡应该看起来与slide
相同)! So maybe, you don't need to apply the hero-transition
at all? 那么也许,你根本不需要应用hero-transition
?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.