Come funziona Polymer Hero Transition

Question

Prima di tutto mi diverto a capire i fondamenti della transizione dell'eroe all'interno di Polymer. Sto tentando di costruire una scheda di transizione eroe come quella nell'esempio fornito da loro, che può essere trovata here. Di seguito ho creato la mini scheda e sto solo cercando di capire la transizione e come la scheda più grande funziona con quella più piccola.

La mia domanda specifica è: come si lega la transizione a ciascun elemento? Devo completare il CSS per entrambi prima di poter iniziare a giocare con le pagine animate core? È importante avere un modello incorporato?

Qualsiasi guida sarebbe estremamente utile.

<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

in realtà sei molto vicino a una transizione di lavoro con il codice che hai.

Ho implementato una transizione eroe più complicata sul mio sito Web e ho preso del codice da lì per far funzionare il tuo.

<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> 

Ho apportato solo alcune regolazioni.

• Prima di tutto, qualsiasi elemento padre eroe, con l'attributo hero-p, deve contenere solo quell'attributo. Quindi non c'è bisogno di virgolette :)
  <paper-shadow hero-p .. >
• Ogni elemento che fa parte della transizione di Hero, ha bisogno di un attributo hero.
  Ancora, senza le virgolette. <div id="chip_body" .. hero .. >
• E la stessa cosa vale per l'elemento a cui stai passando.
  <div id="card_container" .. hero .. >

---

ho messo una versione funzionante del codice sul mio sito web.
C'è la pagina contenente l'elemento <chip-card> e una seconda pagina che contiene il file modello di lavoro.

Index page
Template file

Si prega di notare: Ho modificato il riferimento alla webcomponentsjs per conformarsi con la mia struttura di cartelle.

Sentitevi liberi di chiedermi se c'è qualcos'altro!