(Полимер) ‹core-animation-pages› Контент растекается за пределами основного DIV при использовании слайда справа

Вот записанное мной короткое видео, демонстрирующее это поведение: https://www.dropbox.com/s/j20zaw2h472l9iu/polymer-slide.mov

Я успешно реализовал core-animation-pages в своем веб-приложении. У меня есть 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>

person Mr. Rod    schedule 09.05.2015    source источник


Ответы (1)


Используйте overflow:hidden на своей основной-анимированной-странице, чтобы в качестве контейнера он скрывал любое содержимое переполнения, когда вы анимируете страницу внутри контейнера.

person tyohan    schedule 11.05.2015