聚合物核心 - 列表內的動畫頁面

我想創建一個結構，我有一個列表，並且可以使用英雄轉換爲列表中的每個項目添加動畫。但是，如果我讓它變成這樣，那麼所有的物品都會變得相互重疊......我該怎麼辦？聚合物核心 - 列表內的動畫頁面

<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

聚合物核心 - 列表內的動畫頁面

回答

相關問題