霓虹動畫頁面動畫大小與聚合

Question

我正在使用聚合物的應用程序。此應用使用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行註釋掉的overflow-x。

Answer 2

像這樣向兩個容器div添加z-index。

<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元素中的style標籤中，以將你的html和你的css分開。