I have a core-animated-pages element with two pages in it. page 0 contains a rectangle region with top and bottom sections. page 1 also has top and bottom sections and I want the rectangle in page 0 to merge into page 1 during transition forward, and then back to page 0 during transition back.
I have a plnkr.co sample here: http://plnkr.co/edit/sfiC2LjbaGk7UiZLa4WY the problem that I cannot figure out is that the transition from page 1 back to page 0 is not as smooth as the transition in the reverse direction. I expected it to be the reversed sequence of what is happening when I go from page 0 to page 1. Instead I see that the top and bottom sections of page 1 split and then merge into the rectangle on page 0. I hope I described what I am looking for clearly enough. Below is my self contained code. Please help. <html> <head> <script src="http://www.polymer-project.org/webcomponents.js";></script> <link rel="import" href= "http://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html"; > <link rel="import" href= "http://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html"; > <link rel="import" href= "http://www.polymer-project.org/components/core-icons/core-icons.html";> </head> <body> <polymer-element name="test-app"> <template> <core-animated-pages fit selected="{{page}}" transitions= "hero-transition" on-back="{{back}}"> <section layout horizontal end> <div style="width:150px;height:150px" layout vertical hero hero-id ="page" on-tap="{{forward}}"> <div flex style="background-color:#5bb75b">top</div> <div hero hero-id="page-bottom" style="background-color: #333;color:#fff;height:2em;line-height:2em">bottom</div> </div> </section> <test-page></test-page> </core-animated-pages> </template> <script> (function() { Polymer({ page: 0, back: function() { this.page = 0; }, forward: function() { this.page = 1; } }); })(); </script> </polymer-element> <polymer-element name="test-page"> <template> <section fit hero hero-id="page" layout vertical> <paper-icon-button icon="arrow-back" style="position:absolute" on-tap="{{transition}}"></paper-icon-button> <div flex style="background-color:#5bb75b;padding-top:3em">top2 </div> <div hero hero-id="page-bottom" style="color: #fff;background-color:#333;height:5em;line-height:5em">bottom 2</div> </section> </template> <script> (function() { Polymer({ transition: function(e) { e.stopPropagation(); this.fire('back'); } }); })(); </script> </polymer-element> <test-app fit></test-app> </body> </html> Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/0eb8e6a0-c466-434a-8d41-2756786863e0%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
