diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-menu-button/paper-menu-button-animations.html')
-rw-r--r-- | catapult/third_party/polymer/components/paper-menu-button/paper-menu-button-animations.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-menu-button/paper-menu-button-animations.html b/catapult/third_party/polymer/components/paper-menu-button/paper-menu-button-animations.html new file mode 100644 index 00000000..b1339f29 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-menu-button/paper-menu-button-animations.html @@ -0,0 +1,109 @@ +<!-- +@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-animation/web-animations.html"> +<link rel="import" href="../neon-animation/neon-animation-behavior.html"> +<script> + Polymer({ + is: 'paper-menu-grow-height-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + var rect = node.getBoundingClientRect(); + var height = rect.height; + + this._effect = new KeyframeEffect(node, [{ + height: (height / 2) + 'px' + }, { + height: height + 'px' + }], this.timingFromConfig(config)); + + return this._effect; + } + }); + + Polymer({ + is: 'paper-menu-grow-width-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + var rect = node.getBoundingClientRect(); + var width = rect.width; + + this._effect = new KeyframeEffect(node, [{ + width: (width / 2) + 'px' + }, { + width: width + 'px' + }], this.timingFromConfig(config)); + + return this._effect; + } + }); + + Polymer({ + is: 'paper-menu-shrink-width-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + var rect = node.getBoundingClientRect(); + var width = rect.width; + + this._effect = new KeyframeEffect(node, [{ + width: width + 'px' + }, { + width: width - (width / 20) + 'px' + }], this.timingFromConfig(config)); + + return this._effect; + } + }); + + Polymer({ + is: 'paper-menu-shrink-height-animation', + + behaviors: [ + Polymer.NeonAnimationBehavior + ], + + configure: function(config) { + var node = config.node; + var rect = node.getBoundingClientRect(); + var height = rect.height; + var top = rect.top; + + this.setPrefixedProperty(node, 'transformOrigin', '0 0'); + + this._effect = new KeyframeEffect(node, [{ + height: height + 'px', + transform: 'translateY(0)' + }, { + height: height / 2 + 'px', + transform: 'translateY(-20px)' + }], this.timingFromConfig(config)); + + return this._effect; + } + }); +</script> + + |