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

Question

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

問題是，當我使用核心動畫頁面包裝通用內容時，元素列表彼此重疊。 我知道這是因為動畫頁面將我的內容位置轉換為絕對位置（並且我不想更改該位置），但是為什么在這種情況下元素內容沒有達到其子高度？

我把演示從聚合物現場演示好一點什么，我想在這里完成-

我在post-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標記內的選定屬性上使用數據綁定

<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;
        }
    }
})

如果這不起作用，您可以嘗試將on-tap屬性上的位置更改為section標記。 <section on-tap="{{togglePage}}"></section>