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

我想创建一个结构，我有一个列表，并且可以使用英雄转换为列表中的每个项目添加动画。但是，如果我让它变成这样，那么所有的物品都会变得相互重叠......我该怎么办？聚合物核心 - 列表内的动画页面

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

来源

2015-02-06 MegaX

这个问题已经存在，那就是： [http://stackoverflow.com/questions/28132532/polymer-core-transitions-for-animated-pages-with -core一览内容] [1] [1]：http://stackoverflow.com/questions/28132532/polymer-core-transitions-for-animated-pages-with-core-list-内容 – 2015-02-06 09:53:11

不，这是不一样的问题。 – MegaX 2015-02-06 10:28:02

为了防止项目重叠，您需要确保元素具有高度。你可以通过在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

来源

2015-02-06 18:11:44 robdodson

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

回答

相关问题