1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html> 12 <head> 13 <title>neon-animated-pages demo: declarative</title> 14 15 <meta charset="utf-8"> 16 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 17 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 18 19 <script src="../../../webcomponentsjs/webcomponents-lite.js"></script> 20 21 <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> 22 <link rel="import" href="../../../paper-styles/typography.html"> 23 <link rel="import" href="../../../paper-styles/color.html"> 24 <link rel="import" href="../../neon-animated-pages.html"> 25 <link rel="import" href="../../neon-animatable.html"> 26 <link rel="import" href="../../neon-animations.html"> 27 28 <style is="custom-style"> 29 body { 30 overflow: hidden; 31 @apply(--layout-fullbleed); 32 @apply(--layout-vertical); 33 } 34 35 .toolbar { 36 position: relative; 37 38 padding: 8px; 39 40 background-color: white; 41 42 z-index: 12; 43 } 44 45 neon-animated-pages { 46 @apply(--layout-flex); 47 } 48 49 neon-animatable { 50 color: white; 51 @apply(--layout-horizontal); 52 @apply(--layout-center-center); 53 @apply(--paper-font-display4); 54 } 55 56 neon-animatable:nth-child(1) { 57 background: var(--paper-red-500); 58 } 59 60 neon-animatable:nth-child(2) { 61 background: var(--paper-blue-500); 62 } 63 64 neon-animatable:nth-child(3) { 65 background: var(--paper-orange-500); 66 } 67 68 neon-animatable:nth-child(4) { 69 background: var(--paper-green-500); 70 } 71 72 neon-animatable:nth-child(5) { 73 background: var(--paper-purple-500); 74 } 75 76 </style> 77 78 </head> 79 <body> 80 81 <template is="dom-bind"> 82 83 <div class="toolbar"> 84 <button on-click="_onPrevClick">⇦</button> 85 <button on-click="_onNextClick">⇨</button> 86 <button on-click="_onUpClick">⇧</button> 87 <button on-click="_onDownClick">⇩</button> 88 </div> 89 90 <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]"> 91 <neon-animatable>1</neon-animatable> 92 <neon-animatable>2</neon-animatable> 93 <neon-animatable>3</neon-animatable> 94 <neon-animatable>4</neon-animatable> 95 <neon-animatable>5</neon-animatable> 96 </neon-animated-pages> 97 98 </template> 99 100 <script> 101 102 var scope = document.querySelector('template[is="dom-bind"]'); 103 scope.selected = 0; 104 105 scope._onPrevClick = function() { 106 this.entryAnimation = 'slide-from-left-animation'; 107 this.exitAnimation = 'slide-right-animation'; 108 this.selected = this.selected === 0 ? 4 : (this.selected - 1); 109 } 110 111 scope._onNextClick = function() { 112 this.entryAnimation = 'slide-from-right-animation'; 113 this.exitAnimation = 'slide-left-animation'; 114 this.selected = this.selected === 4 ? 0 : (this.selected + 1); 115 } 116 117 scope._onUpClick = function() { 118 this.entryAnimation = 'slide-from-top-animation'; 119 this.exitAnimation = 'slide-down-animation'; 120 this.selected = this.selected === 4 ? 0 : (this.selected + 1); 121 } 122 123 scope._onDownClick = function() { 124 this.entryAnimation = 'slide-from-bottom-animation'; 125 this.exitAnimation = 'slide-up-animation'; 126 this.selected = this.selected === 0 ? 4 : (this.selected - 1); 127 } 128 129 </script> 130 131 </body> 132 </html> 133
