（聚合物） <core-animation-pages> 使用“从右滑动”时，内容在主DIV之外渗出

Question

Here's a brief video I recorded showing this behaviour: https://www.dropbox.com/s/j20zaw2h472l9iu/polymer-slide.mov

I've succesfully implemented core-animation-pages on my web app. I've got 3 differentes div's that transition using the slide-from-right animation with no problem, except that in desktop view the content doesn't "hide" within the main div (white color) and instead is seen on top of the gray background for about a second. This is not visible on mobile or tablet view.

Is there anything CSS-wise I need to write to avoid this?

Here's my code:

<core-toolbar class="medium-tall">
<div flex class="title">Elementos del lenguaje visual</div>
<div class="bottom fit" horizontal layout>
  <paper-tabs flex noink selected="{{selected}}">   
    <paper-tab>LÍNEA</paper-tab>
    <paper-tab>FORMA</paper-tab>
    <paper-tab>COLOR</paper-tab>        
  </paper-tabs> 
</div>
</core-toolbar>

  <div class="{{ {scroll: !wide} | tokenList }}" layout vertical flex>
  <core-animated-pages id="pages" selected="{{selected}}" on-core-animated-pages-transition-end="{{done}}" transitions="slide-from-right" layout flex>      

    <div id="linea">
    <div id="bidimensional">
    {{CONTENT}}
    </div>
    <div class="separador"></div>
    <div id="tridimensional">
    {{CONTENT}}
    </div>   
    </div>

  </core-animated-pages>
  </div>

Answer 1

在您的核心动画页面上使用overflow:hidden ，以便作为容器使用，当您在容器内对页面进行动画处理时，它将隐藏所有溢出内容。