首先，我很难理解 Polymer 中英雄转换的基本原理。我正在尝试构建一张英雄过渡卡，就像他们提供的示例中的那样，可以找到 here . 下面我构建了迷你卡，我只是想了解过渡以及大卡如何与小卡一起工作。
我的具体问题是，过渡如何绑定(bind)到每个元素？在开始使用核心动画页面之前，我是否需要完成两者的 CSS？有一个嵌入式模板重要吗？
任何指导都会非常有帮助。
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">
<template>
<style>
#page2 {
width: 100%;
height: 100%;
}
#paper_shadow {
position: relative;
display: inline-block;
font-family:'Roboto', sans-serif;
font-size: 12px;
color: white;
}
#chip_body {
height: 400px;
width: 300px;
background-color: aqua;
color: black;
}
#chip_top {
background-color: deeppink;
background-image: url();
background-size: cover;
background-position: center center;
width: 100%;
position: relative;
}
#chip_bottom {
background-color: #fbfbfb;
width: 100%;
height: 20%;
position: relative;
font-size: 1.2em;
word-wrap: break-word;
}
#text {
padding-left: 5%;
padding-right: 2.5%;
overflow: hidden;
}
#coreImage {
display: block;
}
#card_container {
width: 70%;
height: 600px;
background-color: aqua;
color: black;
}
#card_right {
height: 100%;
width: 30%;
}
#card_left {
background-color: darkblue;
height: 100%;
width;
70%;
}
#card_left_top {
padding-right: 20px;
padding-top: 20px;
background-color: skyblue;
}
#circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
#header_text {
}
#card_content {
width:100%;
background-color: lightcoral;
}
</style>
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated=true; hero-p="" on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero=""></div>
</section>
</core-animated-pages>
</template>
<script>
Polymer('chip-card', {
page: 0,
raise: function() {
this.$.paper_shadow.setZ(2);
},
lower: function() {
this.$.paper_shadow.setZ(1);
},
transition: function(e) {
if (this.page === 0) {
this.$.paper_shadow = e.currentTarget;
this.page = 1;
} else {
this.page = 0;
}
}
});
</script>
</polymer-element>
最佳答案
您实际上已经非常接近于您所拥有的代码的工作转换。
我在我的网站上实现了一个更复杂的英雄转换，并从那里获取了一些代码来让你的工作。
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" hero-p on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" hero vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero></div>
</section>
</core-animated-pages>
我只做了一些调整。
- 首先，任何英雄父元素，带有
hero-p属性，应该只包含该属性。所以不需要引号:)
<paper-shadow hero-p .. > - Hero 转换中的每个元素都需要
hero属性。
同样，没有引号。<div id="chip_body" .. hero .. > - 同样的事情也适用于你要过渡到的元素。
<div id="card_container" .. hero .. >
我已将您代码的工作版本放在我的网站上。
页面包含 <chip-card>元素和包含工作模板文件的第二页。
请注意:我编辑了对 webcomponentsjs 的引用以符合我的文件夹结构。
有什么事可以随时问我!
关于html - Polymer Hero Transition 的工作原理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30062310/