/ / Polymer: Udfør animerede sider overgang på polymerelement - polymer

Polymer: Udfør animerede sider-overgang på polymerelement - polymer

Sig jeg har fået en polymer app test-app, en almindelig div div-a, og et polymerelement page-a.

Nu forsøger jeg at bygge en animated-pages, som indeholder div-a og 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>

Problemet er: når overgangen foregår, animationen på div-a fungerer fint, men den ene på page-a virker ikke. I stedet for at falme i, den page-a bare pludselig vises.

Et andet mærkeligt punkt er: hvis jeg ændrer transitions="cross-fade" ind i transitions="cross-fade-all", og fjern andre cross-fade defineret på div og page-a, begge overgange arbejde finde.

Enhver ide?

svar:

0 for svar № 1

Cross-fade virker ikke direkte på elementer, der har overflow: hidden sæt.


Beslægtede spørgsmål


Kommentarer (0)

Tilføj en kommentar