/ / Polymer: executa a transição de páginas animadas no elemento polímero - polímero

Polímero: executa a transição de páginas animadas no elemento polímero - polímero

Digamos que eu tenha um aplicativo de polímero test-appum div regular div-ae um elemento polimérico page-a.

Agora estou tentando construir um animated-pages, que contém div-a e 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>

O problema é: ao realizar a transição, a animação em div-a funciona bem, mas o da page-a não funciona. Em vez de desaparecer, o page-a de repente aparece.

Outro ponto estranho é: se eu mudar transitions="cross-fade" para dentro transitions="cross-fade-all"e remova outros cross-fade definido em div e page-a, ambas as transições funcionam.

Qualquer ideia?

Respostas:

0 para resposta № 1

Cross-fade não funciona diretamente em elementos que têm overflow: hidden conjunto.


Perguntas relacionadas


Comentários (0)

Adicione um comentário