聚合物英雄过渡如何运作

Question

首先,我很难理解Polymer中英雄转型的基本原理.我正在尝试构建一个类似于他们提供的示例中的英雄过渡卡,可以在此处找到.下面我已经制作了迷你卡,我只是想了解过渡以及较大的卡如何与较小的卡一起工作.

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

Answer 1

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

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

    <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属性。
  再次强调，不带引号。<div id="chip_body" .. hero .. >
• 对于您要过渡到的元素也是如此。
  <div id="card_container" .. hero .. >

我已将您的代码的工作版本放在我的网站上。
有一个页面包含该<chip-card>元素，第二个页面包含工作模板文件。

索引页
模板文件

请注意：我编辑了参考以webcomponentsjs符合我的文件夹结构。

还有什么事情就尽管问我吧！