(聚合物)<core-animation-pages> 使用"slide-from-right"时内容物在主DIV之外渗出

Question

这是我录制的一个简短视频，显示了此行为：https：//www.dropbox.com/s/j20zaw2h472l9iu/polymer-slide.mov

我在Web应用程序上成功实现了核心动画页面。我有3个不同的Div，使用幻灯片从右右动画过渡没有任何问题，除了在桌面视图中，内容不会在主div中"隐藏"（白色），而是在其顶部看到灰色背景约一秒钟。这在移动或平板电脑视图上不可见。

我需要写任何CSS以避免这种情况吗？

这是我的代码：

<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，以便作为容器，当您在容器内部的页面上动画时，它将隐藏任何溢出内容。