Geek Answers Handbook

Polymer core transitions for animated pages with main list content

Following this question , I further developed an example demo message in an attempt to create page transitions between two pages with main lists.

I am trying to achieve the following:

  • hero transitions in factories on every page
  • slide transitions (in opposite directions) on two pages
  • this works as expected no matter where you scroll in lists

Please note that pages change when you click on factories.

I had some success, but I can not get it to work correctly in all aspects, as can be seen from my jsbin .

I suspect that part of the problem is related to the size of the sections that wrap the main lists. I cannot understand how they rate them, but I think they are important for the transition effect.

Please also note that it’s also important to maintain a flexible addition on the sides of the lists (similar to what exists in a real mailbox)

+7
css polymer
source share
1 answer

Firstly, there is no slide-from-left transition. You will need to remove everything related to it in your code.

I found that hero-transition does not work with slide-from-right transition. A possible alternative would be to wrap these two paper-fab in another 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>

Refer to this jsbin for help. Please note that paper-fab moved the same way they are animated using the slide transition ('cause hero-transition animates the shape and position between elements, in this case the animation transition should look identical to slide )! Perhaps you do not need to use hero-transition ?

+5
source share

More articles:


All Articles