核心動畫頁面內的聚合物 - 內容標籤不佔用高度

Question

我有一個元素列表，我希望每個元素都有2個頁面/ 2個視圖。 每個元素都有一個通用內容（<content></content>）。

問題是，當我使用核心動畫頁面來包裝我的通用內容時，我的元素列表是相互之間的一個。 我知道這是因爲動畫頁面會將我的內容位置轉換爲絕對位置（並且我不想更改該位置），但爲什麼元素內容在此情況下無法獲得其子高度？

我把the demo從聚合物現場演示好一點什麼，我想在這裏完成 -

的後card.html裏面我插入的核心動畫的頁面，這樣，當我點擊每個元素，它會將視圖切換到「下一頁！」

<core-animated-pages id="p" on-tap="{{togglePage}}" transitions="cross-fade-all"> 
    <section> 
    <div class="card-header" layout horizontal center> 

     <content select="img"></content> 
     <content select="h2"></content> 

    </div> 

    <core-icon-button 
     id="favicon" 
     icon="favorite" 
     on-tap="{{favoriteTapped}}"> 
    </core-icon-button> 

    <content></content> 
    </section> 
    <section> 
     <p>NEXT PAGE!</p> 
    </section> 
    </core-animated-pages> 
    </template> 
    <script> 
    Polymer ({ 
    publish: { 
     favorite: { 
     value: false, 
     reflect: true 
     } 
    }, 
    favoriteTapped: function(event, detail, sender) { 
     this.favorite = !this.favorite; 
     this.fire('favorite-tap'); 
    }, 
    togglePage: function() { 
     var max = 1; 
     if (this.$.p.selected === max) { 
     this.$.p.selected -= 1; 
     } else { 
     this.$.p.selected += 1; 
     } 
    } 
    }); 
    </script> 

Answer 1

你可以使用的核心動畫的頁面中選擇屬性數據綁定標籤

<core-animated-pages 
    id="p" 
    on-tap="{{togglePage}}" 
    transitions="cross-fade-all" 
    selected="{{mySelected}}" 
> 

<script> 
Polymer({ 
    mySelected: 0, //default value 
    togglePage: function(){ 
     var max = 1; 
     if (this.$.p.selected === max) { 
      this.mySelected -= 1; 
     } else { 
      this.mySelected += 1; 
     } 
    } 
}) 

如果不工作，你可以嘗試在上抽頭改變的地方屬性爲部分標記。 <section on-tap="{{togglePage}}"></section>