Polymer Core Transitions for Animated Pages with Core List Content

polymer core-animated-pages inside a list

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 Chip-to-Card Pattern with core-animated-pages and a Long List

To make the transitions work smoothly, you need to first disable the core-animated-pages from scrolling.

core-animated-pages {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

And then of course you need to set the list section to be scrollable again.

<section style="overflow:scroll">
    <div class="chip-container" hero-p on-tap="{{transition}}">

That's it! Please see this JSFiddle for reference.

Unable to apply core-animated pages transition with JS

I see you are importing slide-from-right.html, but you then use transitions="fade-scale" (which is not defined as a core-animated-pages transition). You instead need to import each transition you wish to use, and separate them by spaces in the transitions list:

<link rel="import" href="components/core-animated-pages/transitions/cross-fade.html">, <link rel="import" href="components/core-animated-pages/transitions/scale-up.html">,
...
<core-animated-pages selected="{{ sel }}" transitions="cross-fade scale-up">

Polymer Core Transitions for Animated Pages with Core List Content

polymer core-animated-pages inside a list

Polymer Chip-to-Card Pattern with core-animated-pages and a Long List

Unable to apply core-animated pages transition with JS

Related Topics

Leave a reply