Polymer - 在纸上制作动画内容答案

【问题标题】：Polymer - animating content within paperPolymer - 在纸上制作动画内容
【发布时间】：2015-12-04 20:06:16
【问题描述】：

我正在尝试学习 Polymer。目前，我有一个自定义元素需要在一些纸张中为内容设置动画。为了尝试做到这一点，我目前有以下内容：

<paper-material elevation="4">
  <h4>Hello</h4>

  <neon-animated-pages selected="0" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">                         
    <div>
      Thank you for visiting. I think you'll enjoy what you're
      gonna find. To dive in, click the "Next" button.
      <br />
      <paper-button>Next</paper-button>
    </div>

    <div>
      some more information
    </div>                          
  </neon-animated-pages>
</paper-material>

奇怪的是，neon-animated-pages 元素中的内容没有在纸张中正确呈现。我在下面包含了一个屏幕截图，显示了它是如何呈现的。

我做错了什么？

【问题讨论】：

标签： polymer material-design

【解决方案1】：

如果您查看neon-animated-pages 的来源，您会发现它是一个position: relative div，其子项（页面）都是position: absolute（从文档流中取出）。

这意味着除非你给你的neon-animated-pages 元素一个高度（通过直接设置height CCS 属性或fit 或flex 类），你会看到一些像这样的溢出。

【讨论】：