Index: polymer_1.0.4/bower_components/neon-animation/demo/tiles/squares-page.html |
diff --git a/polymer_1.0.4/bower_components/neon-animation/demo/tiles/squares-page.html b/polymer_1.0.4/bower_components/neon-animation/demo/tiles/squares-page.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..f417e6b9c5c25c8a8a160f119b53f22955b07284 |
--- /dev/null |
+++ b/polymer_1.0.4/bower_components/neon-animation/demo/tiles/squares-page.html |
@@ -0,0 +1,104 @@ |
+<!-- |
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+<link rel="import" href="../../../polymer/polymer.html"> |
+<link rel="import" href="../../../paper-styles/paper-styles.html"> |
+<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> |
+ |
+<dom-module id="squares-page"> |
+ |
+ <style> |
+ |
+ .header { |
+ height: 40%; |
+ background: var(--color-one); |
+ } |
+ |
+ .body { |
+ text-align: center; |
+ padding: 8px; |
+ } |
+ |
+ .square { |
+ display: inline-block; |
+ width: 150px; |
+ height: 150px; |
+ margin: 8px; |
+ background: var(--color-two); |
+ } |
+ |
+ </style> |
+ |
+ <template> |
+ |
+ <div id="header" class="header"></div> |
+ |
+ <div class="body"> |
+ <div class="square"></div> |
+ <div class="square"></div> |
+ <div class="square"></div> |
+ <div class="square"></div> |
+ </div> |
+ |
+ </template> |
+ |
+</dom-module> |
+ |
+<script> |
+ |
+ Polymer({ |
+ |
+ is: 'squares-page', |
+ |
+ behaviors: [ |
+ Polymer.NeonSharedElementAnimatableBehavior |
+ ], |
+ |
+ properties: { |
+ |
+ sharedElements: { |
+ value: function() { |
+ return { |
+ 'hero': this.$.header |
+ } |
+ } |
+ }, |
+ |
+ animationConfig: { |
+ value: function() { |
+ var squares = Polymer.dom(this.root).querySelectorAll('.square'); |
+ var squaresArray = Array.prototype.slice.call(squares); |
+ return { |
+ 'entry': [{ |
+ name: 'hero-animation', |
+ id: 'hero', |
+ toPage: this |
+ }, { |
+ name: 'cascaded-animation', |
+ animation: 'transform-animation', |
+ transformFrom: 'translateY(100%)', |
+ nodes: squaresArray |
+ }], |
+ |
+ 'exit': [{ |
+ name: 'slide-up-animation', |
+ node: this.$.header |
+ }, { |
+ name: 'cascaded-animation', |
+ animation: 'transform-animation', |
+ transformTo: 'translateY(60vh)', |
+ nodes: squaresArray |
+ }] |
+ }; |
+ } |
+ } |
+ } |
+ |
+ }); |
+ |
+</script> |