Check out this quick video I made to demonstrate the issue:
I have successfully incorporated core-animation-pages into my web application. I have three different divs that transition using the slide-from-right animation without any problems. However, in desktop view, the content does not seem to "hide" within the main white div and instead remains visible on top of the gray background for a brief moment. This issue is not present in mobile or tablet view.
Is there any CSS code that I should write to prevent this from happening?
Take a look at the code snippet below:
<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>