How Polymer Hero Transition Works

Question

Firstly, it’s hard for me to understand the basics of moving a character to Polymer. I am trying to create a hero transition map, as in the example they presented, which can be found here . Below I built a mini-map, and I'm just trying to understand the transition and how the larger map works with the smaller one.

My specific question is: how does the transition bind to each element? Do I need to fill in CSS for both before I start playing with core-animated pages? Does the built-in template have a question?

Any guidance would be very helpful.

<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

you are actually very close to working transition with the code that you have.

I implemented a more complex transition of the hero on my website and took some code from there to make you work.

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

I made some adjustments.

• First of all, any parent element of a hero with the hero-p attribute should contain only this attribute. So there is no need for quotation marks :)
  <paper-shadow hero-p .. >
• Each element that is part of the Hero transition needs a hero attribute.
  Again, without quotes. <div id="chip_body" .. hero .. >
• And the same goes for the element you are transitioning to.
  <div id="card_container" .. hero .. >

---

I posted a working version of your code on my website.
There is a <chip-card> element and a second page containing a working template file.

Index Page
Template file

Pay attention . I edited the link to webcomponentsjs to fit the structure of my folder.

Feel free to ask me if there is anything else!