diff options
Diffstat (limited to 'catapult/third_party/polymer/components/neon-animation/demo/tiles/squares-page.html')
-rw-r--r-- | catapult/third_party/polymer/components/neon-animation/demo/tiles/squares-page.html | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/neon-animation/demo/tiles/squares-page.html b/catapult/third_party/polymer/components/neon-animation/demo/tiles/squares-page.html new file mode 100644 index 00000000..52fe7e18 --- /dev/null +++ b/catapult/third_party/polymer/components/neon-animation/demo/tiles/squares-page.html @@ -0,0 +1,100 @@ +<!-- +@license +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="../../neon-shared-element-animatable-behavior.html"> + +<dom-module id="squares-page"> + <template> + <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> + + <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> |