0
看看這個筆：英雄轉變並不在兩個方向上工作
http://codepen.io/dusanmiloradovic/pen/GgdQjp
<polymer-element name="frontpage-item" attributes="label,ariaLabel,icon, theme, heroId, page">
<link rel="import" href="http://www.polymer-project.org/components/core-icons/av-icons.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icons/core-icons.html">
<template>
<div class="category-item {{theme}}-theme " vertical layout on-tap="{{bla}}">
<div class="tile theme-bg-a" dummy fit >
</div>
<div class="tile" flex auto vertical layout>
<div flex auto relative>
<div fit layout vertical center center-justified>
<div class="category-bg-wrapper" relative>
<core-icon class="category-tile-bg " icon="{{icon}}" fit aria-label="{{ariaLabel}}" role="img">
</core-icon>
</div>
</div>
</div>
<div class="cat-name theme-bg" hero hero-id="{{heroId}}" horizontal center layout>
<div flex>
<span>{{label}}
</span>
</div>
<core-icon class="category-icon theme-bg" icon="av:play-arrow" aria-label="play-arrow" role="img">
</core-icon>
</div>
</div>
</div>
<style>
.category-item {
position: relative;
float: left;
vertical-align: top;
width: 50%;
height: 224px;
will-change: transform;
}
.tile {
position: relative;
margin: 2px;
}
.category-bg-wrapper {
width: 80%;
height: 80%;
}
.category-bg-wrapper core-icon {
height: 100%;
width: 100%;
}
.category-tile-bg {
position: absolute !important;
}
.cat-name {
height: 48px;
padding: 0 16px;
font-size: 12px;
}
</style>
</template>
<script>
Polymer({
bla:function(ev,details,sender){
var cap=document.querySelector("core-animated-pages");
cap.selected=this.page;
}
});
</script>
</polymer-element>
<core-animated-pages selected="{{selected}}" valueattr="page" transitions ="hero-transition cross-fade-all" layout fit>
<section page="categories" on-tap="{{bla}}">
<template id="categories" is="auto-binding">
<div class="categories-panel" flex auto>
<core-toolbar class="category-toolbar"></core-toolbar>
<template repeat="{{cat in categories}}">
<frontpage-item label="{{cat.label}}" ariaLabel="{{cat.ariaLabel}}" icon="{{cat.icon}}" theme="{{cat.theme}}" heroID="{{cat.heroId}}" page="{{cat.page}}" ></frontpage-item>
</template>
</div>
</template>
</section>
<section page="redPage" >
<core-header-panel layout fit>
<core-toolbar hero hero-id="red" class="red tall"><paper-icon-button icon="close" ></paper-icon-button> Red</core-toolbar>
</core-header-panel>
</section>
<section page="bluePage">
<core-header-panel layout fit>
<core-toolbar hero hero-id="blue" class="blue tall"><paper-icon-button icon="close" ></paper-icon-button> Blue</core-toolbar>
</core-header-panel>
</section>
<section page="yellowPage">
<core-header-panel layout fit>
<core-toolbar hero hero-id="yellow" class="yellow tall"><paper-icon-button icon="close" ></paper-icon-button> Yellow</core-toolbar>
</core-header-panel>
</section>
<section page="greenPage">
<core-header-panel layout fit>
<core-toolbar hero hero-id="green" class="green tall"><paper-icon-button icon="close" ></paper-icon-button> Green</core-toolbar>
</core-header-panel>
</section>
</core-animated-pages>
當我從一節「類別」的任何其他部分導航，英雄轉變不發生，只是交叉淡入淡出。但是當選擇變回「類別」時，英雄轉換按預期完成。我沒有看到任何明顯的原因。