聚合物英雄過渡如何工作

Question

首先，我很難理解聚合物中英雄過渡的基本原理。我正在嘗試構建一個英雄轉換卡，如他們提供的示例中的轉換卡，可以找到here。 下面我已經構建了迷你卡，我只是想了解過渡以及較大的卡如何與較小的卡一起工作。

我的具體問題是，過渡如何綁定到每個元素？在我開始玩核心動畫頁面之前，我是否需要爲這兩者完成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>元素，第二頁包含工作模板文件。

Index page
Template file

請注意：我編輯的參考webcomponentsjs我的文件夾結構保持一致。

隨意問我是否還有其他東西！