third_party/polymer/v1_0/components-chromium/paper-menu-button/paper-menu-button-animations-extracted.js

   1
   2   Polymer({
   3     is: 'paper-menu-grow-height-animation',
   4
   5     behaviors: [
   6       Polymer.NeonAnimationBehavior
   7     ],
   8
   9     configure: function(config) {
  10       var node = config.node;
  11       var rect = node.getBoundingClientRect();
  12       var height = rect.height;
  13
  14       this._effect = new KeyframeEffect(node, [{
  15         height: (height / 2) + 'px'
  16       }, {
  17         height: height + 'px'
  18       }], this.timingFromConfig(config));
  19
  20       return this._effect;
  21     }
  22   });
  23
  24   Polymer({
  25     is: 'paper-menu-grow-width-animation',
  26
  27     behaviors: [
  28       Polymer.NeonAnimationBehavior
  29     ],
  30
  31     configure: function(config) {
  32       var node = config.node;
  33       var rect = node.getBoundingClientRect();
  34       var width = rect.width;
  35
  36       this._effect = new KeyframeEffect(node, [{
  37         width: (width / 2) + 'px'
  38       }, {
  39         width: width + 'px'
  40       }], this.timingFromConfig(config));
  41
  42       return this._effect;
  43     }
  44   });
  45
  46   Polymer({
  47     is: 'paper-menu-shrink-width-animation',
  48
  49     behaviors: [
  50       Polymer.NeonAnimationBehavior
  51     ],
  52
  53     configure: function(config) {
  54       var node = config.node;
  55       var rect = node.getBoundingClientRect();
  56       var width = rect.width;
  57
  58       this._effect = new KeyframeEffect(node, [{
  59         width: width + 'px'
  60       }, {
  61         width: width - (width / 20) + 'px'
  62       }], this.timingFromConfig(config));
  63
  64       return this._effect;
  65     }
  66   });
  67
  68   Polymer({
  69     is: 'paper-menu-shrink-height-animation',
  70
  71     behaviors: [
  72       Polymer.NeonAnimationBehavior
  73     ],
  74
  75     configure: function(config) {
  76       var node = config.node;
  77       var rect = node.getBoundingClientRect();
  78       var height = rect.height;
  79       var top = rect.top;
  80
  81       this.setPrefixedProperty(node, 'transformOrigin', '0 0');
  82
  83       this._effect = new KeyframeEffect(node, [{
  84         height: height + 'px',
  85         transform: 'translateY(0)'
  86       }, {
  87         height: height / 2 + 'px',
  88         transform: 'translateY(-20px)'
  89       }], this.timingFromConfig(config));
  90
  91       return this._effect;
  92     }
  93   });