Question

我正在使用Polymer开发应用程序。此应用使用neon-animated-pages在视图和标签之间移动。我有Plunk here。这里可以看到一些相关的代码：

<div style="width:33%; background-color:lightgrey;">
  <paper-button on-click="onItem1Click">Item 1</paper-button>
  <paper-button on-click="onItem2Click">Item 2</paper-button>
  <paper-button on-click="onItem3Click">Item 3</paper-button>
  <br /><br /><br /><br />
</div>

<div id="contentArea" style="width:67%; padding:12px;">
  <neon-animated-pages selected="[[ selectedIndex ]]" entry-animation="slide-left-animation" exit-animation="slide-left-animation">
    <section>
      <item-1></item-1>
    </section>

    <section>
      <item-2></item-2>
    </section>

    <section>
      <h4>Item 3</h4>
      <p>This is information for item #3.</p>
    </section>
  </neon-animated-pages>
</div>

当我点击paper-button或paper-tab时，会动画一些新内容。但是，当内容离开时，它会在灰色导航区域的顶部向左移动。我想让内容动画到左边。但是，我不希望它在此过程中涵盖“第1项”，“第2项”和“第3项”。它就像neon-animated-pages元素一样使用整个屏幕来制作动画而不仅仅是它所限制的区域，在这种情况下它将是“contentArea”div。我不知道如何解决这个问题。

Answer 1

在这里：http://plnkr.co/edit/LOqnbtdZJkr0xIgxsOyM?p=preview

将overflow-x: hidden;添加到67％宽度div。

前一段时间this codepen我遇到了同样的问题。注意css文件第7行的注释掉的溢出x。

Answer 2

将z-index添加到两个容器div中，如此。

<div style="width:33%; background-color:lightgrey; z-index:1;"></div>
<div id="contentArea" style="width:67%; padding:12px; z-index:0"></div>

你也可以将你的css放在该Polymer元素的样式标签中，以将你的html与你的CSS分开。

霓虹动画页面动画大小与聚合物

2 个答案: