英雄过渡在两个方向都不起作用

时间：2015-02-24 09:03:33

标签： polymer

看看这支笔：

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>

当我从部分＆＃34;类别＆＃34;对于任何其他部分，英雄过渡不会发生，只是交叉淡入淡出。但是当选择更改回＆＃34;类别＆＃34;时，英雄过渡按预期完成。我没有看到任何明显的原因。

1 个答案:

答案 0 :(得分：0)

如果我使用模板而不是Polymer元素，一切都按预期工作：

http://codepen.io/dusanmiloradovic/pen/bNMzrq

这看起来像是Polymer中的错误，因为带有前一笔中的hero-id的元素div是远离核心动画页面的一个阴影根：

<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>
相关问题
最新问题