Html 聚合物英雄过渡的工作原理

首先，我很难理解聚合物中英雄转变的基本原理。我试图建立一个英雄过渡卡，就像他们提供的例子中的一张，可以找到。 下面是我制作的迷你卡，我只是想了解这种转换，以及大卡和小卡是如何工作的

我的具体问题是，转换如何绑定到每个元素？在开始玩核心动画页面之前，我需要完成这两个页面的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>

#第2页{
宽度：100%；
身高：100%；
}
#纸影{
位置：相对位置；
显示：内联块；
字体系列：'Roboto'，无衬线；
字体大小：12px；
颜色：白色；
}
#切屑体{
高度：400px；
宽度：300px；
背景色：浅绿色；
颜色：黑色；
}
#芯片顶部{
背景颜色：深粉色；
背景图片：url（）；
背景尺寸：封面；
背景位置：中心；
宽度：100%；
位置：相对位置；
}
#切屑底部{
背景色：#fbfb；
宽度：100%；
身高：20%；
位置：相对位置；
字体大小：1.2米；
单词包装：打断单词；
}
#正文{
左：5%；
右侧填充：2.5%；
溢出：隐藏；
}
#核心图像{
显示：块；
}
#卡丁集装箱{
宽度：70%；
高度：600px；
背景色：浅绿色；
颜色：黑色；
}
#卡丁：对{
身高：100%；
宽度：30%；
}
#卡左{
背景色：深蓝色；
身高：100%；
宽度；
70%;
}
#卡片左上方{
右边填充：20px；
填充顶部：20px；
背景色：天蓝色；
}
#圈{
宽度：30px；
高度：30px；
边界半径：50%；
背景色：红色；
}
#标题文本{
}
#卡片内容{
宽度：100%；
背景颜色：浅珊瑚；
}
聚合物（“芯片卡”{
页码：0，
提高：功能（）{
这是$.paper_shadow.setZ（2）；
},
下：函数（）{
这是$.paper_shadow.setZ（1）；
},
过渡：职能（e）{
如果（this.page==0）{
此.$.paper\u shadow=e.currentTarget；
本页=1；
}否则{
本页=0；
}
}
});

使用现有的代码，您实际上已经非常接近工作转换

我已经在我的网站上实现了一个更复杂的英雄转换，并从那里获取了一些代码来让你的工作

我只做了一些调整

• 首先，任何具有

  hero-p

  属性的hero父元素都应该只包含该属性。所以不需要引号：）
  

• 作为英雄转换一部分的每个元素都需要一个

  Hero

  属性。
  同样，没有引号<代码>
• 对于要转换到的元素，情况也是如此。
  

---

我已将您的代码的工作版本放在我的网站上。
有一个页面包含

元素，第二个页面包含工作模板文件

请注意：我编辑了对

webcomponentsjs

的引用，以符合我的文件夹结构

---

请随便问我还有什么事

您的链接指向，请修复。@krzysiej-感谢您捕获，修复。