1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10<link rel="import" href="../../../polymer/polymer.html"> 11<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> 12<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> 13<link rel="import" href="../../../paper-styles/typography.html"> 14<link rel="import" href="../../../paper-styles/color.html"> 15<link rel="import" href="../shared-styles.html"> 16 17<dom-module id="animated-grid"> 18 <template> 19 <style include="shared-styles"></style> 20 <style> 21 :host { 22 display: block; 23 background: #000; 24 } 25 26 .tile { 27 display: inline-block; 28 float: left; 29 vertical-align: top; 30 width: calc(100% / 6); 31 height: calc(100% / 3); 32 33 @apply(--paper-font-title); 34 @apply(--layout-vertical); 35 @apply(--layout-center-center); 36 } 37 38 .tile:nth-of-type(1) { 39 width: calc(100% / 3); 40 height: calc(100% / 3 * 2); 41 } 42 43 .tile:nth-of-type(4) { 44 width: calc(100% / 3); 45 } 46 47 .tile:nth-of-type(5) { 48 width: calc(100% / 3); 49 height: calc(100% / 3 * 2); 50 } 51 52 .tile:nth-of-type(8) { 53 width: calc(100% / 3); 54 height: calc(100% / 3); 55 } 56 57 .tile:nth-of-type(9) { 58 position: absolute; 59 top: calc(100% / 3 * 2); 60 left: 0; 61 width: calc(100% / 6); 62 height: calc(100% / 3); 63 } 64 65 .tile:nth-of-type(10) { 66 position: absolute; 67 top: calc(100% / 3 * 2); 68 left: calc(100% / 6);; 69 width: calc(100% / 6); 70 height: calc(100% / 3); 71 } 72 </style> 73 74 <template is="dom-repeat" items="[[config]]"> 75 <div class$="[[_computeTileClass(item.color)]]"> 76 <span>[[item.value]]</span> 77 </div> 78 </template> 79 80 </template> 81 82</dom-module> 83 84<script> 85 86 Polymer({ 87 88 is: 'animated-grid', 89 90 behaviors: [ 91 Polymer.NeonSharedElementAnimatableBehavior 92 ], 93 94 properties: { 95 96 config: { 97 type: Array, 98 value: function() { 99 return [ 100 {value: 1, color: 'blue'}, 101 {value: 2, color: 'red'}, 102 {value: 3, color: 'blue'}, 103 {value: 4, color: 'green'}, 104 {value: 5, color: 'yellow'}, 105 {value: 6, color: 'blue'}, 106 {value: 7, color: 'red'}, 107 {value: 8, color: 'green'}, 108 {value: 9, color: 'yellow'}, 109 {value: 10, color: 'red'} 110 ] 111 } 112 }, 113 114 animationConfig: { 115 type: Object, 116 value: function() { 117 return { 118 'entry': [{ 119 name: 'cascaded-animation', 120 animation: 'transform-animation', 121 transformFrom: 'translateY(100%)', 122 transformTo: 'none', 123 timing: { 124 delay: 50 125 } 126 }] 127 } 128 } 129 } 130 131 }, 132 133 attached: function() { 134 this.async(function() { 135 var nodeList = Polymer.dom(this.root).querySelectorAll('.tile'); 136 this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList); 137 }); 138 }, 139 140 _computeTileClass: function(color) { 141 return 'tile ' + color + '-300'; 142 } 143 144 }); 145 146</script> 147