/ / Polymer:ポリマー要素でアニメーション化されたページへの遷移を実行します - polymer

ポリマー:ポリマー要素ポリマー上のアニメーションページ遷移を実行する

私が言う "1つのポリマーアプリを持っています test-app、通常のdiv 1 div-aそして1つのポリマー要素 page-a.

今私は "を構築しようとしている animated-pages、 を含む div-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>

問題は、トランジションを実行するときにアニメーションが div-a うまくいきますが、 page-a 動作しません。フェードインする代わりに、 page-a 突然現れます。

もう一つの奇妙な点は、私が変わったら transitions="cross-fade"transitions="cross-fade-all"他の cross-fade に定義 div そして page-a、両方の遷移は見つけることができます。

何か案が?

回答:

回答№1は0

クロスフェードは、持っている要素には直接作用しません。 overflow: hidden セット。


関連する質問


コメント(0)

コメントを追加