diff options
Diffstat (limited to 'chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/circles-page.html')
-rw-r--r-- | chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/circles-page.html | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/circles-page.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/circles-page.html new file mode 100644 index 00000000000..3d7fdddca2f --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/tiles/circles-page.html @@ -0,0 +1,115 @@ +<!-- +@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="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> + +<dom-module id="circles-page"> + <template> + <style> + :host { + @apply --layout-horizontal; + @apply --layout-center-center; + } + + .circle { + display: inline-block; + box-sizing: border-box; + width: 100px; + height: 100px; + margin: 16px; + border-radius: 50%; + background: var(--color-one); + } + </style> + + <div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + <div class="circle"></div> + </div> + + </template> + +</dom-module> + +<script> + + Polymer({ + + is: 'circles-page', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + + animationConfig: { + type: Object + } + }, + + listeners: { + 'click': '_onClick' + }, + + attached: function() { + if (this.animationConfig) { + return; + } + + var circles = Polymer.dom(this.root).querySelectorAll('.circle'); + var circlesArray = Array.prototype.slice.call(circles); + this.animationConfig = { + 'entry': [{ + name: 'cascaded-animation', + animation: 'scale-up-animation', + nodes: circlesArray + }], + + 'exit': [{ + name: 'hero-animation', + id: 'hero', + fromPage: this + }, { + name: 'cascaded-animation', + animation: 'scale-down-animation' + }] + }; + }, + + _onClick: function(event) { + var target = Polymer.dom(event).rootTarget; + + if (target.classList.contains('circle')) { + // configure the page animation + this.sharedElements = { + 'hero': target + }; + + var nodesToScale = []; + var circles = Polymer.dom(this.root).querySelectorAll('.circle'); + + for (var node, index = 0; node = circles[index]; index++) { + if (node !== event.target) { + nodesToScale.push(node); + } + } + + this.animationConfig['exit'][1].nodes = nodesToScale; + this.fire('circle-click'); + } + } + + }); + +</script> |