/ / Polymère: effectuer une transition de pages animées sur un élément polymère - polymère

Polymère: effectuer une transition de pages animées sur un élément polymère - polymère

Dites que j'ai "une application de polymère test-app, une div régulière div-aet un élément polymère page-a.

Maintenant, j'essaie de construire un animated-pages, qui contient div-a et 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>

Le problème est le suivant: lors de la transition, l’animation sur div-a fonctionne bien, mais celui sur page-a ne marche pas. Au lieu de disparaître, le page-a vient soudainement.

Un autre point étrange est: si je change transitions="cross-fade" dans transitions="cross-fade-all"et supprimer les autres cross-fade défini sur div et page-a, les deux transitions fonctionnent.

Une idée?

Réponses:

0 pour la réponse № 1

Le fondu enchaîné ne fonctionne pas directement sur les éléments qui ont overflow: hidden ensemble.


questions connexes


Commentaires (0)

Ajouter un commentaire