diff options
Diffstat (limited to 'chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-card.html')
-rw-r--r-- | chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-card.html | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-card.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-card.html new file mode 100644 index 00000000000..12979bb1a70 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/neon-animation/demo/card/x-card.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="../../../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> + +<dom-module id="x-card"> + <template> + <style> + :host { + display: block; + overflow: hidden; + } + #placeholder { + opacity: 0; + background-color: grey; + @apply --layout-fit; + } + </style> + + <div id="placeholder"></div> + <div id="container"> + <slot name="div"></slot> + </div> + + </template> +</dom-module> + +<script> +(function() { + Polymer({ + is: 'x-card', + + behaviors: [ + Polymer.NeonSharedElementAnimatableBehavior + ], + + properties: { + animationConfig: { + type: Object + }, + + sharedElements: { + type: Object + } + }, + + attached: function() { + if (this.animationConfig) { + return; + } + + this.animationConfig = { + 'entry': [{ + name: 'ripple-animation', + id: 'ripple', + toPage: this + }, { + name: 'fade-out-animation', + node: this.$.placeholder, + timing: { + delay: 250 + } + }, { + name: 'fade-in-animation', + node: this.$.container, + timing: { + delay: 50 + } + }], + + 'exit': [{ + name: 'fade-out-animation', + node: this.$.container, + timing: { + duration: 0 + } + }, { + name: 'reverse-ripple-animation', + id: 'reverse-ripple', + fromPage: this + }] + }; + + this.sharedElements = { + 'ripple': this.$.placeholder, + 'reverse-ripple': this.$.placeholder + }; + } + }); +})(); +</script> |