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

我正在开发一款使用聚合物的应用程序。此应用程序使用

霓虹灯动画页面

在视图和选项卡之间移动。我有一本书。此处可以看到一些相关代码：

<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>

项目1
项目2
项目3






项目3
这是第3项的信息

---

当我单击

纸张按钮

或

纸张选项卡

时，一些新内容会进入动画。但是，当内容离开时，它会在灰色导航区域的顶部向左设置动画。我希望内容向左设置动画。不过，我不希望在过程中涉及“项目1”、“项目2”和“项目3”。它与neon动画页面类似，元素使用整个屏幕来制作动画，而不仅仅是它所限定的区域，在这种情况下，该区域就是“contentArea”

div

。我不知道如何解决这个问题。

像这样将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>

您还可以将其置于聚合元素内的样式标记中，以将html与css分开。

给您：

添加

溢出-x：隐藏到67%宽度
div

不久前我也遇到了同样的问题。注意css文件第7行注释掉的overflow-x