1 <!doctype html> 2 <html> 3 <head> 4 <title>core-animated-pages</title> 5 <script src="../../platform/platform.js"></script> 6 <link href="nested-animated-pages.html" rel="import"> 7 8 <style> 9 body { 10 font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif; 11 margin: 0; 12 background: #f1f1f1; 13 } 14 15 nested-demo { 16 display: block; 17 position: absolute; 18 top: 0; 19 left: 0; 20 bottom: 0; 21 right: 0; 22 } 23 </style> 24 </head> 25 <body> 26 27 <polymer-element name="nested-demo"> 28 <template> 29 30 <style> 31 32 core-animated-pages { 33 display: block; 34 position: absolute; 35 top: 0; 36 left: 0; 37 bottom: 0; 38 right: 0; 39 } 40 41 section { 42 text-align: center; 43 padding-top: 250px; 44 } 45 46 .square { 47 display: inline-block; 48 margin: 8px; 49 padding: 8px; 50 width: 200px; 51 height: 200px; 52 background-color: orange; 53 color: #fff; 54 } 55 </style> 56 57 <core-animated-pages selected="{{page}}" transitions="hero-transition cross-fade"> 58 59 <section on-tap="{{transition}}" layout horizontal center-justified> 60 61 <div class="square" id="thing1" hero-id="thing" hero?="{{subpage === 0}}" cross-fade?="{{subpage !== 0}}">thing 1</div> 62 <div class="square" id="thing2" hero-id="thing" hero?="{{subpage === 1}}" cross-fade?="{{subpage !== 1}}">thing 2</div> 63 64 </section> 65 66 <nested-animated-pages page="{{subpage}}" on-nested-back="{{back}}"></nested-animated-pages> 67 68 </core-animated-pages> 69 </template> 70 <script> 71 72 Polymer('nested-demo', { 73 74 page: 0, 75 subpage: 0, 76 77 transition: function(e) { 78 79 var el = e.target; 80 if (el.id === "thing1") { 81 this.subpage = 0; 82 } else { 83 this.subpage = 1; 84 } 85 86 setTimeout(function() { 87 this.page = 1; 88 }.bind(this), 200); 89 }, 90 91 back: function() { 92 this.page = 0; 93 } 94 95 }); 96 97 </script> 98 </polymer-element> 99 100 <nested-demo></nested-demo> 101 102 </body> 103 </html> 104