Jak działa Transition Hero Bohaterów

Question

Po pierwsze mam trudny okres zrozumienia podstaw przejścia bohatera w Polymer. Próbuję zbudować kartę przejściową bohatera, taką jak ta w przedstawionym przez nią przykładzie, którą można znaleźć pod adresem here. Poniżej zbudowałem kartę mini i próbuję zrozumieć przejście i to, jak większa karta działa z mniejszą.

Moje konkretne pytanie brzmi: w jaki sposób przejście wiąże się z każdym elementem? Czy muszę ukończyć CSS dla obu, zanim będę mógł zacząć grać na animowanych stronach? Czy posiadanie wbudowanego szablonu ma znaczenie?

Wszelkie wskazówki będą niezwykle pomocne.

<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

jesteś bardzo blisko przejścia roboczego z posiadanym kodem.

Zaimplementowałem bardziej skomplikowane przejście bohatera na mojej stronie internetowej i wziąłem trochę kodu, aby twój działał.

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

Wprowadziłem tylko kilka poprawek.

• Po pierwsze, każdy element macierzysty bohatera, z atrybutem hero-p, powinien zawierać tylko ten atrybut. Więc nie ma potrzeby stosowania cudzysłowów :)
  <paper-shadow hero-p .. >
• Każdy element, który jest częścią przejścia bohaterów, potrzebuje atrybutu hero.
  Znów, bez cudzysłowów. <div id="chip_body" .. hero .. >
• To samo dotyczy elementu, do którego się przenosisz.
  <div id="card_container" .. hero .. >

---

Wrzuciłem wersję roboczą swojego kodu na mojej stronie. Ta strona zawiera element <chip-card> i drugą stronę zawierającą działający plik szablonu.

Index page
Template file

Uwaga: I edycja odniesienie do webcomponentsjs do zgodne z moim struktury folderów.

Proszę zapytać mnie, czy jest coś jeszcze!