/ / Polímero: realiza la transición de páginas animadas en el elemento polímero - polímero

Polímero: realiza la transición de páginas animadas en el elemento polímero - polímero

Digamos que tengo una aplicación de polímero test-app, un div regular div-a, y un elemento polimérico page-a.

Ahora estoy tratando de construir un animated-pages, que contiene div-a y page-a

<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-icons/core-icons.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">

<link rel="import" href="../page-a/page-a.html">

<polymer-element name="test-app" flex vertical layout>

<template>
<core-animated-pages
selected="{{selected}}"
transitions="cross-fade"
>
<section name="div-a">
<div cross-fade>
<span>div-a</span>
</div>
</section>

<section name="page-a">
<page-a cross-fade></page-a>
</section>

</core-animated-pages>

</template>

<script src="./test-app.js"></script>

</polymer-element>

El problema es: al realizar la transición, la animación en div-a funciona bien, pero el de page-a No funciona. En lugar de desvanecerse, el page-a Simplemente aparece de repente.

Otro punto extraño es: si cambio transitions="cross-fade" dentro transitions="cross-fade-all", y quitar otros cross-fade definido en div y page-a, ambas transiciones de trabajo encuentran.

¿Alguna idea?

Respuestas:

0 para la respuesta № 1

El fundido cruzado no funciona directamente en elementos que tienen overflow: hidden conjunto.


preguntas relacionadas


Comentarios (0)

Añadir un comentario