hero transition does not behave as I expected

122 views
Skip to first unread message

akonsu

unread,
Dec 1, 2014, 11:56:56 AM12/1/14
to polym...@googlegroups.com
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.


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>

Reply all
Reply to author
Forward
0 new messages