/ / Polymer: vykonávať prechod animovaných stránok na polymérny prvok - polymér

Polymér: vykonajte prechod animovaných strán na polymérový prvok - polymér

Povedzme, že mám jednu aplikáciu polyméru test-appjeden riadny div div-aa jeden polymérny prvok page-a.

Teraz sa snažím vybudovať animated-pages, ktorý obsahuje div-a a 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>

Problém je: pri vykonávaní prechodu, animácie na div-a funguje dobre, ale ten na page-a nefunguje. Namiesto toho, aby zmizol, page-a Náhle sa objaví.

Ďalším podivným bodom je: ak sa zmením transitions="cross-fade" do transitions="cross-fade-all"a odstráňte iné cross-fade definované div a page-a, obe prechody práce nájsť.

Nejaký nápad?

odpovede:

0 pre odpoveď č. 1

Cross-fade nefunguje priamo na prvkoch, ktoré majú overflow: hidden nastavený.


Súvisiace otázky


Komentáre (0)

Pridať komentár