designer

designer.html

<!--<link href="../core-icon-button/core-icon-button.html" rel="import">
<link href="../core-toolbar/core-toolbar.html" rel="import">
<link href="../core-header-panel/core-header-panel.html" rel="import">
<link href="../core-animated-pages/core-animated-pages.html" rel="import">
<link href="../core-animated-pages/transitions/hero-transition.html" rel="import">
<link href="../core-animated-pages/transitions/cross-fade.html" rel="import">
<link href="../core-animated-pages/transitions/slide-down.html" rel="import">
<link href="../core-animated-pages/transitions/slide-up.html" rel="import">
<link href="../core-animated-pages/transitions/tile-cascade.html" rel="import">-->
<link href="../components/core-animated-pages/core-animated-pages.html" rel="import">
<link href="../components/core-animated-pages/transitions/cross-fade.html" rel="import">
<link href="../components/core-animated-pages/transitions/slide-from-right.html" rel="import">
<link href="../components/core-animated-pages/transitions/hero-transition.html" rel="import">


<polymer-element name="my-element">

  <template>
    <style>
      #core-pages-animated transitions {
        width: 100%; 
        height: 100%;
      }
      #hero1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 300px;
        background-color: orange;
      }
      #hero2 {
        position: absolute;
        top: 200px;
        left: 300px;
        width: 300px;
        height: 300px;
        background-color: orange;
      }
      #bottom1, #bottom2 {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        height: 50px;
      }
      #bottom1 {
        background-color: blue;
      }
      #bottom2 {
        background-color: green;
      }
      
    </style>
    <!-- // hero-transition and cross-fade are declared elsewhere -->
        <core-animated-pages transitions="hero-transition cross-fade">
          <section id="page1">
            <div id="hero1" hero-id="hero" hero></div>
            <div id="bottom1" cross-fade></div>
          </section>
          <section id="page2">
            <div id="hero2" hero-id="hero" hero></div>
            <div id="bottom2" cross-fade></div>
          </section>
        </core-animated-pages>
  </template>

  <script>
        document.addEventListener('click', function(e) {
        var pages = document.querySelector('core-animated-pages');
        pages.selected = (pages.selected + 1) % pages.children.length;
      });
      </script>

</polymer-element>