polymer core-animated-pages inside a list

Question

I want to create a structure where i have a list and i can animate each item of the list with hero transitions. But if i make it like this then all items get on top of each other... What should I do?

  <template repeat="{{item in items}}">
                    <div layout vertical  content
                         flex>
                        <core-animated-pages  content
                                              layout vertical flex > 
                            <section>
                                <paper-shadow class="chain">
                                    {{item}}
                                </paper-shadow>
                            </section>
                            <section>
                                {{item.artists}}
                            </section>
                        </core-animated-pages>
                    </div>
                </template>

This question already exists, here it is: [http://stackoverflow.com/questions/28132532/polymer-core-transitions-for-animated-pages-with-core-list-content][1] [1]: http://stackoverflow.com/questions/28132532/polymer-core-transitions-for-animated-pages-with-core-list-content — Goce Ribeski, Feb 06 '15 at 09:53

score 1 · Accepted Answer · answered Feb 06 '15 at 18:11

To keep the items from overlapping you need to make sure that your element has a height. You can do this by using layout attributes on the body itself and your custom element instance.

<body fullbleed layout vertical>

  <polymer-element name="x-foo">
    <template>
      <template repeat="{{item in items}}">
        <div layout vertical flex>
          <core-animated-pages layout vertical flex> 
            <section>
              {{item.artist}}
            </section>
          </core-animated-pages>
        </div>
      </template>
    </template>
    <script>
      Polymer({
        items: [
          {
            artist: 'Some dude'
          },
          {
            artist: 'Some other dude'
          }
        ]
      });
    </script>
  </polymer-element>

  <x-foo layout vertical flex></x-foo>

</body>

Example jsbin

polymer core-animated-pages inside a list

1 Answers1