/ / Polymer: Führen Sie den Übergang animierter Seiten auf Polymerelement - Polymer durch

Polymer: Führen Sie den Übergang animierter Seiten auf Polymerelement - Polymer durch

Sag, ich habe eine Polymer-App test-appein reguläres div div-aund ein Polymerelement page-a.

Jetzt versuche ich ein animated-pages, was beinhaltet div-a und 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>

Das Problem ist: Wenn Sie den Übergang durchführen, wird die Animation aktiviert div-a funktioniert gut, aber der eine weiter page-a funktioniert nicht. Anstatt zu verblassen, die page-a erscheint plötzlich.

Ein anderer seltsamer Punkt ist: wenn ich mich verändere transitions="cross-fade" in transitions="cross-fade-all", und entferne andere cross-fade definiert am div und page-afunktionieren beide Übergänge.

Irgendeine Idee?

Antworten:

0 für die Antwort № 1

Cross-Fade funktioniert nicht direkt mit Elementen, die overflow: hidden einstellen.


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen