列表中的聚合物核心动画页面

Question

我想创建一个结构，其中我有一个列表，我可以使用英雄转换为列表中的每个项目设置动画。但是，如果我这样做，那么所有项目都会相互叠加...我该怎么办？

  <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>

Answer 1

要防止项目重叠，您需要确保您的元素具有高度。您可以通过在 body 本身和您的自定义元素实例上使用布局属性来做到这一点。

<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

polymer