From 94432e76bd3a659268a4f8f28389485e72942a73 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Tue, 27 Mar 2018 17:41:48 -0700
Subject: [PATCH 01/11] remove neon-animation

---
 bower.json             |  12 +-
 demo/index.html        |   2 -
 paper-menu-button.html | 256 +++++++++++++++++++++++++----------------
 3 files changed, 159 insertions(+), 111 deletions(-)

diff --git a/bower.json b/bower.json
index 5dc8128..15a8591 100644
--- a/bower.json
+++ b/bower.json
@@ -24,9 +24,8 @@
     "polymer": "Polymer/polymer#1.9 - 2",
     "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#1 - 2",
     "iron-behaviors": "PolymerElements/iron-behaviors#1 - 2",
-    "iron-dropdown": "PolymerElements/iron-dropdown#1 - 2",
+    "iron-dropdown": "PolymerElements/iron-dropdown#no-neon-animation",
     "iron-fit-behavior": "PolymerElements/iron-fit-behavior#1 - 2",
-    "neon-animation": "PolymerElements/neon-animation#1 - 2",
     "paper-styles": "PolymerElements/paper-styles#1 - 2"
   },
   "devDependencies": {
@@ -41,8 +40,7 @@
     "paper-item": "PolymerElements/paper-item#1 - 2",
     "paper-listbox": "PolymerElements/paper-listbox#1 - 2",
     "web-component-tester": "^6.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
-    "web-animations-js": "web-animations/web-animations-js#^2.2"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   },
   "variants": {
     "1.x": {
@@ -50,9 +48,8 @@
         "polymer": "Polymer/polymer#^1.9",
         "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
         "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
-        "iron-dropdown": "PolymerElements/iron-dropdown#^1.0.0",
+        "iron-dropdown": "PolymerElements/iron-dropdown#no-neon-animation",
         "iron-fit-behavior": "PolymerElements/iron-fit-behavior#^1.2.0",
-        "neon-animation": "PolymerElements/neon-animation#^1.0.0",
         "paper-styles": "PolymerElements/paper-styles#^1.0.0"
       },
       "devDependencies": {
@@ -67,8 +64,7 @@
         "paper-item": "PolymerElements/paper-item#^1.0.0",
         "paper-listbox": "PolymerElements/paper-listbox#^1.0.0",
         "web-component-tester": "^4.0.0",
-        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-        "web-animations-js": "web-animations/web-animations-js#^2.2"
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
       },
       "resolutions": {
         "webcomponentsjs": "^0.7"
diff --git a/demo/index.html b/demo/index.html
index d00dd45..bd5ab7c 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -31,8 +31,6 @@
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 
-  <!-- Ensure Web Animations polyfill is loaded since neon-animation 2.0 doesn't import it -->
-  <link rel="import" href="../../neon-animation/web-animations.html">
   <link rel="import" href="../paper-menu-button.html">
 
   <custom-style>
diff --git a/paper-menu-button.html b/paper-menu-button.html
index f4c1503..d44e9cf 100644
--- a/paper-menu-button.html
+++ b/paper-menu-button.html
@@ -12,11 +12,8 @@
 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../iron-behaviors/iron-control-state.html">
 <link rel="import" href="../iron-dropdown/iron-dropdown.html">
-<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
-<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
 <link rel="import" href="../paper-styles/default-theme.html">
 <link rel="import" href="../paper-styles/shadow.html">
-<link rel="import" href="paper-menu-button-animations.html">
 
 <!--
 Material design: [Dropdown buttons](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
@@ -80,56 +77,182 @@
       }
 
       iron-dropdown {
+        border-radius: 2px;
+        @apply --shadow-elevation-2dp;
         @apply --paper-menu-button-dropdown;
       }
 
       .dropdown-content {
-        @apply --shadow-elevation-2dp;
-
         position: relative;
-        border-radius: 2px;
         background-color: var(--paper-menu-button-dropdown-background, var(--primary-background-color));
 
         @apply --paper-menu-button-content;
       }
 
-      :host([vertical-align="top"]) .dropdown-content {
-        margin-bottom: 20px;
-        margin-top: -10px;
-        top: 10px;
+      #trigger {
+        cursor: pointer;
       }
 
-      :host([vertical-align="bottom"]) .dropdown-content {
-        bottom: 10px;
-        margin-bottom: -10px;
-        margin-top: 20px;
+      .animating,
+      .animating > * {
+        overflow: hidden;
+        will-change: transform;
+        contain: content;
+        animation-fill-mode: both;
+        animation-timing-function: step-end;
       }
 
-      #trigger {
-        cursor: pointer;
+      .entry-animation {
+        animation-delay: 100ms;
+        animation-duration: 250ms;
+        animation-name: expand-animation;
+      }
+
+      .entry-animation>* {
+        animation-delay: 100ms;
+        animation-duration: 250ms;
+        animation-name: expand-animationInverse;
+      }
+
+      .exit-animation {
+        animation-duration: 150ms;
+        animation-name: expand-animation;
+        animation-direction: reverse;
+      }
+
+      .exit-animation>* {
+        animation-duration: 150ms;
+        animation-name: expand-animationInverse;
+        animation-direction: reverse;
+      }
+
+      @keyframes expand-animation {
+        0% {
+          opacity: 0;
+          transform: scale(0.7, 0.5);
+        }
+        6.25% {
+          opacity: 0.2;
+          transform: scale(0.75669, 0.59448);
+        }
+        12.5% {
+          opacity: 0.3;
+          transform: scale(0.80741, 0.67902);
+        }
+        18.75% {
+          opacity: 0.4;
+          transform: scale(0.85146, 0.75243);
+        }
+        25% {
+          opacity: 0.6;
+          transform: scale(0.88846, 0.8141);
+        }
+        31.25% {
+          opacity: 0.7;
+          transform: scale(0.91851, 0.86418);
+        }
+        37.5% {
+          opacity: 0.8;
+          transform: scale(0.9421, 0.90351);
+        }
+        43.75% {
+          opacity: 0.9;
+          transform: scale(0.96006, 0.93343);
+        }
+        50% {
+          opacity: 1;
+          transform: scale(0.97333, 0.95555);
+        }
+        56.25% {
+          transform: scale(0.98285, 0.97142);
+        }
+        62.5% {
+          transform: scale(0.98949, 0.98248);
+        }
+        68.75% {
+          transform: scale(0.99395, 0.98992);
+        }
+        75% {
+          transform: scale(0.99682, 0.9947);
+        }
+        81.25% {
+          transform: scale(0.99854, 0.99757);
+        }
+        87.5% {
+          transform: scale(0.99948, 0.99913);
+        }
+        93.75% {
+          transform: scale(0.9999, 0.99983);
+        }
+        100% {
+          transform: scale(1, 1);
+        }
       }
+
+      @keyframes expand-animationInverse {
+        0% {
+          transform: scale(1.42857, 2);
+        }
+        6.25% {
+          transform: scale(1.32155, 1.68214);
+        }
+        12.5% {
+          transform: scale(1.23853, 1.47271);
+        }
+        18.75% {
+          transform: scale(1.17445, 1.32903);
+        }
+        25% {
+          transform: scale(1.12554, 1.22835);
+        }
+        31.25% {
+          transform: scale(1.08872, 1.15717);
+        }
+        37.5% {
+          transform: scale(1.06146, 1.10679);
+        }
+        43.75% {
+          transform: scale(1.0416, 1.07132);
+        }
+        50% {
+          transform: scale(1.0274, 1.04652);
+        }
+        56.25% {
+          transform: scale(1.01745, 1.02942);
+        }
+        62.5% {
+          transform: scale(1.01062, 1.01783);
+        }
+        68.75% {
+          transform: scale(1.00609, 1.01018);
+        }
+        75% {
+          transform: scale(1.00319, 1.00533);
+        }
+        81.25% {
+          transform: scale(1.00146, 1.00244);
+        }
+        87.5% {
+          transform: scale(1.00052, 1.00087);
+        }
+        93.75% {
+          transform: scale(1.0001, 1.00017);
+        }
+        100% {
+          transform: scale(1, 1);
+        }
+      }
+
     </style>
 
     <div id="trigger" on-tap="toggle">
       <slot name="dropdown-trigger"></slot>
     </div>
 
-    <iron-dropdown
-      id="dropdown"
-      opened="{{opened}}"
-      horizontal-align="[[horizontalAlign]]"
-      vertical-align="[[verticalAlign]]"
-      dynamic-align="[[dynamicAlign]]"
-      horizontal-offset="[[horizontalOffset]]"
-      vertical-offset="[[verticalOffset]]"
-      no-overlap="[[noOverlap]]"
-      open-animation-config="[[openAnimationConfig]]"
-      close-animation-config="[[closeAnimationConfig]]"
-      no-animations="[[noAnimations]]"
-      focus-target="[[_dropdownContent]]"
-      allow-outside-scroll="[[allowOutsideScroll]]"
-      restore-focus-on-close="[[restoreFocusOnClose]]"
-      on-iron-overlay-canceled="__onIronOverlayCanceled">
+    <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizontalAlign]]" vertical-align="[[verticalAlign]]"
+      dynamic-align="[[dynamicAlign]]" horizontal-offset="[[horizontalOffset]]" vertical-offset="[[verticalOffset]]" no-overlap="[[noOverlap]]"
+      entry-animation="entry-animation" exit-animation="exit-animation" no-animations="[[noAnimations]]" focus-target="[[_dropdownContent]]"
+      allow-outside-scroll="[[allowOutsideScroll]]" restore-focus-on-close="[[restoreFocusOnClose]]" on-iron-overlay-canceled="__onIronOverlayCanceled">
       <div slot="dropdown-content" class="dropdown-content">
         <slot id="content" name="dropdown-content"></slot>
       </div>
@@ -140,11 +263,6 @@
     (function() {
       'use strict';
 
-      var config = {
-        ANIMATION_CUBIC_BEZIER: 'cubic-bezier(.3,.95,.5,1)',
-        MAX_ANIMATION_TIME_MS: 400
-      };
-
       var PaperMenuButton = Polymer({
         is: 'paper-menu-button',
 
@@ -263,66 +381,6 @@
             value: false
           },
 
-          /**
-           * An animation config. If provided, this will be used to animate the
-           * opening of the dropdown.
-           */
-          openAnimationConfig: {
-            type: Object,
-            value: function() {
-              return [{
-                name: 'fade-in-animation',
-                timing: {
-                  delay: 100,
-                  duration: 200
-                }
-              }, {
-                name: 'paper-menu-grow-width-animation',
-                timing: {
-                  delay: 100,
-                  duration: 150,
-                  easing: config.ANIMATION_CUBIC_BEZIER
-                }
-              }, {
-                name: 'paper-menu-grow-height-animation',
-                timing: {
-                  delay: 100,
-                  duration: 275,
-                  easing: config.ANIMATION_CUBIC_BEZIER
-                }
-              }];
-            }
-          },
-
-          /**
-           * An animation config. If provided, this will be used to animate the
-           * closing of the dropdown.
-           */
-          closeAnimationConfig: {
-            type: Object,
-            value: function() {
-              return [{
-                name: 'fade-out-animation',
-                timing: {
-                  duration: 150
-                }
-              }, {
-                name: 'paper-menu-shrink-width-animation',
-                timing: {
-                  delay: 100,
-                  duration: 50,
-                  easing: config.ANIMATION_CUBIC_BEZIER
-                }
-              }, {
-                name: 'paper-menu-shrink-height-animation',
-                timing: {
-                  duration: 200,
-                  easing: 'ease-in'
-                }
-              }];
-            }
-          },
-
           /**
            * By default, the dropdown will constrain scrolling on the page
            * to itself when opened.
@@ -475,10 +533,6 @@
         }
       });
 
-      Object.keys(config).forEach(function (key) {
-        PaperMenuButton[key] = config[key];
-      });
-
       Polymer.PaperMenuButton = PaperMenuButton;
     })();
   </script>

From 72ff84867ac3e236090b13f72f6c9c51d79d674e Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Tue, 27 Mar 2018 17:48:58 -0700
Subject: [PATCH 02/11] update types

---
 paper-menu-button-animations.d.ts |  1 -
 paper-menu-button.d.ts            | 15 ---------------
 2 files changed, 16 deletions(-)

diff --git a/paper-menu-button-animations.d.ts b/paper-menu-button-animations.d.ts
index 25d3cec..d46610b 100644
--- a/paper-menu-button-animations.d.ts
+++ b/paper-menu-button-animations.d.ts
@@ -9,7 +9,6 @@
  */
 
 /// <reference path="../polymer/types/polymer.d.ts" />
-/// <reference path="../neon-animation/neon-animation-behavior.d.ts" />
 
 interface PaperMenuGrowHeightAnimationElement extends Polymer.Element, Polymer.NeonAnimationBehavior {
   configure(config: any): any;
diff --git a/paper-menu-button.d.ts b/paper-menu-button.d.ts
index f9f4c1d..cb491b9 100644
--- a/paper-menu-button.d.ts
+++ b/paper-menu-button.d.ts
@@ -12,11 +12,8 @@
 /// <reference path="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.d.ts" />
 /// <reference path="../iron-behaviors/iron-control-state.d.ts" />
 /// <reference path="../iron-dropdown/iron-dropdown.d.ts" />
-/// <reference path="../neon-animation/animations/fade-in-animation.d.ts" />
-/// <reference path="../neon-animation/animations/fade-out-animation.d.ts" />
 /// <reference path="../paper-styles/default-theme.d.ts" />
 /// <reference path="../paper-styles/shadow.d.ts" />
-/// <reference path="paper-menu-button-animations.d.ts" />
 
 /**
  * Material design: [Dropdown buttons](https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons)
@@ -121,18 +118,6 @@ declare class PaperMenuButton extends Polymer.Element {
    */
   closeOnActivate: boolean|null|undefined;
 
-  /**
-   * An animation config. If provided, this will be used to animate the
-   * opening of the dropdown.
-   */
-  openAnimationConfig: object|null|undefined;
-
-  /**
-   * An animation config. If provided, this will be used to animate the
-   * closing of the dropdown.
-   */
-  closeAnimationConfig: object|null|undefined;
-
   /**
    * By default, the dropdown will constrain scrolling on the page
    * to itself when opened.

From 94d8bc1d5d99aee1d04a9a985030292a7e91956a Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 28 Mar 2018 18:19:11 -0700
Subject: [PATCH 03/11] fix animation timing, keep open/closeAnimationConfig
 for backward-compat

---
 paper-menu-button.d.ts | 10 ++++++
 paper-menu-button.html | 74 ++++++++++++++++++++++++++++++++----------
 2 files changed, 66 insertions(+), 18 deletions(-)

diff --git a/paper-menu-button.d.ts b/paper-menu-button.d.ts
index cb491b9..f85ad24 100644
--- a/paper-menu-button.d.ts
+++ b/paper-menu-button.d.ts
@@ -118,6 +118,16 @@ declare class PaperMenuButton extends Polymer.Element {
    */
   closeOnActivate: boolean|null|undefined;
 
+  /**
+   * This property is deprecated and will be ignored.
+   */
+  openAnimationConfig: object|null|undefined;
+
+  /**
+   * This property is deprecated and will be ignored.
+   */
+  closeAnimationConfig: object|null|undefined;
+
   /**
    * By default, the dropdown will constrain scrolling on the page
    * to itself when opened.
diff --git a/paper-menu-button.html b/paper-menu-button.html
index d44e9cf..a89166c 100644
--- a/paper-menu-button.html
+++ b/paper-menu-button.html
@@ -104,24 +104,24 @@
 
       .entry-animation {
         animation-delay: 100ms;
-        animation-duration: 250ms;
+        animation-duration: 275ms;
         animation-name: expand-animation;
       }
 
-      .entry-animation>* {
+      .entry-animation > * {
         animation-delay: 100ms;
-        animation-duration: 250ms;
+        animation-duration: 275ms;
         animation-name: expand-animationInverse;
       }
 
       .exit-animation {
-        animation-duration: 150ms;
+        animation-duration: 200ms;
         animation-name: expand-animation;
         animation-direction: reverse;
       }
 
-      .exit-animation>* {
-        animation-duration: 150ms;
+      .exit-animation > * {
+        animation-duration: 200ms;
         animation-name: expand-animationInverse;
         animation-direction: reverse;
       }
@@ -132,47 +132,51 @@
           transform: scale(0.7, 0.5);
         }
         6.25% {
-          opacity: 0.2;
+          opacity: 0.09;
           transform: scale(0.75669, 0.59448);
         }
         12.5% {
-          opacity: 0.3;
+          opacity: 0.17;
           transform: scale(0.80741, 0.67902);
         }
         18.75% {
-          opacity: 0.4;
+          opacity: 0.27;
           transform: scale(0.85146, 0.75243);
         }
         25% {
-          opacity: 0.6;
+          opacity: 0.36;
           transform: scale(0.88846, 0.8141);
         }
         31.25% {
-          opacity: 0.7;
+          opacity: 0.25;
           transform: scale(0.91851, 0.86418);
         }
         37.5% {
-          opacity: 0.8;
+          opacity: 0.5;
           transform: scale(0.9421, 0.90351);
         }
         43.75% {
-          opacity: 0.9;
+          opacity: 0.58;
           transform: scale(0.96006, 0.93343);
         }
         50% {
-          opacity: 1;
+          opacity: 0.67;
           transform: scale(0.97333, 0.95555);
         }
         56.25% {
+          opacity: 0.75;
           transform: scale(0.98285, 0.97142);
         }
         62.5% {
+          opacity: 0.83;
           transform: scale(0.98949, 0.98248);
         }
         68.75% {
+          opacity: 0.82;
           transform: scale(0.99395, 0.98992);
         }
         75% {
+          opacity: 1;
           transform: scale(0.99682, 0.9947);
         }
         81.25% {
@@ -249,10 +253,22 @@
       <slot name="dropdown-trigger"></slot>
     </div>
 
-    <iron-dropdown id="dropdown" opened="{{opened}}" horizontal-align="[[horizontalAlign]]" vertical-align="[[verticalAlign]]"
-      dynamic-align="[[dynamicAlign]]" horizontal-offset="[[horizontalOffset]]" vertical-offset="[[verticalOffset]]" no-overlap="[[noOverlap]]"
-      entry-animation="entry-animation" exit-animation="exit-animation" no-animations="[[noAnimations]]" focus-target="[[_dropdownContent]]"
-      allow-outside-scroll="[[allowOutsideScroll]]" restore-focus-on-close="[[restoreFocusOnClose]]" on-iron-overlay-canceled="__onIronOverlayCanceled">
+    <iron-dropdown
+      id="dropdown"
+      opened="{{opened}}"
+      horizontal-align="[[horizontalAlign]]"
+      vertical-align="[[verticalAlign]]"
+      dynamic-align="[[dynamicAlign]]"
+      horizontal-offset="[[horizontalOffset]]"
+      vertical-offset="[[verticalOffset]]"
+      no-overlap="[[noOverlap]]"
+      entry-animation="entry-animation"
+      exit-animation="exit-animation"
+      no-animations="[[noAnimations]]"
+      focus-target="[[_dropdownContent]]"
+      allow-outside-scroll="[[allowOutsideScroll]]"
+      restore-focus-on-close="[[restoreFocusOnClose]]"
+      on-iron-overlay-canceled="__onIronOverlayCanceled">
       <div slot="dropdown-content" class="dropdown-content">
         <slot id="content" name="dropdown-content"></slot>
       </div>
@@ -381,6 +397,28 @@
             value: false
           },
 
+          /**
+           * This property is deprecated and will be ignored.
+           * @deprecated
+           */
+          openAnimationConfig: {
+            type: Object,
+            value: function() {
+              return [];
+            }
+          },
+
+          /**
+           * This property is deprecated and will be ignored.
+           * @deprecated
+           */
+          closeAnimationConfig: {
+            type: Object,
+            value: function() {
+              return [];
+            }
+          },
+
           /**
            * By default, the dropdown will constrain scrolling on the page
            * to itself when opened.

From 32ea20145b3c7cd0114b44f89e8a7b21941f6479 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 28 Mar 2018 18:21:33 -0700
Subject: [PATCH 04/11] keep neon-animation for animations

---
 bower.json                        | 2 ++
 paper-menu-button-animations.d.ts | 1 +
 2 files changed, 3 insertions(+)

diff --git a/bower.json b/bower.json
index 15a8591..6a4e045 100644
--- a/bower.json
+++ b/bower.json
@@ -26,6 +26,7 @@
     "iron-behaviors": "PolymerElements/iron-behaviors#1 - 2",
     "iron-dropdown": "PolymerElements/iron-dropdown#no-neon-animation",
     "iron-fit-behavior": "PolymerElements/iron-fit-behavior#1 - 2",
+    "neon-animation": "PolymerElements/neon-animation#1 - 2",
     "paper-styles": "PolymerElements/paper-styles#1 - 2"
   },
   "devDependencies": {
@@ -50,6 +51,7 @@
         "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
         "iron-dropdown": "PolymerElements/iron-dropdown#no-neon-animation",
         "iron-fit-behavior": "PolymerElements/iron-fit-behavior#^1.2.0",
+        "neon-animation": "PolymerElements/neon-animation#^1.0.0",
         "paper-styles": "PolymerElements/paper-styles#^1.0.0"
       },
       "devDependencies": {
diff --git a/paper-menu-button-animations.d.ts b/paper-menu-button-animations.d.ts
index d46610b..25d3cec 100644
--- a/paper-menu-button-animations.d.ts
+++ b/paper-menu-button-animations.d.ts
@@ -9,6 +9,7 @@
  */
 
 /// <reference path="../polymer/types/polymer.d.ts" />
+/// <reference path="../neon-animation/neon-animation-behavior.d.ts" />
 
 interface PaperMenuGrowHeightAnimationElement extends Polymer.Element, Polymer.NeonAnimationBehavior {
   configure(config: any): any;

From a9119ac89cceadab16ffed6a7509e222ddca6966 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Thu, 29 Mar 2018 22:49:29 -0700
Subject: [PATCH 05/11] remove neon-animation props

---
 paper-menu-button.html | 57 ++++++++++++------------------------------
 1 file changed, 16 insertions(+), 41 deletions(-)

diff --git a/paper-menu-button.html b/paper-menu-button.html
index a89166c..7d9bafd 100644
--- a/paper-menu-button.html
+++ b/paper-menu-button.html
@@ -76,6 +76,10 @@
         @apply --paper-menu-button-disabled;
       }
 
+      #trigger {
+        cursor: pointer;
+      }
+
       iron-dropdown {
         border-radius: 2px;
         @apply --shadow-elevation-2dp;
@@ -83,18 +87,16 @@
       }
 
       .dropdown-content {
+        /* Inherits from iron-dropdown, so inverse animation can work as expected. */
+        transform-origin: inherit;
         position: relative;
         background-color: var(--paper-menu-button-dropdown-background, var(--primary-background-color));
 
         @apply --paper-menu-button-content;
       }
-
-      #trigger {
-        cursor: pointer;
-      }
-
+      
       .animating,
-      .animating > * {
+      .animating > .dropdown-content {
         overflow: hidden;
         will-change: transform;
         contain: content;
@@ -102,27 +104,23 @@
         animation-timing-function: step-end;
       }
 
-      .entry-animation {
-        animation-delay: 100ms;
-        animation-duration: 275ms;
+      .animating {
         animation-name: expand-animation;
       }
 
-      .entry-animation > * {
-        animation-delay: 100ms;
-        animation-duration: 275ms;
+      .animating > .dropdown-content {
         animation-name: expand-animationInverse;
       }
 
-      .exit-animation {
-        animation-duration: 200ms;
-        animation-name: expand-animation;
-        animation-direction: reverse;
+      .entry-animation,
+      .entry-animation > .dropdown-content {
+        animation-delay: 100ms;
+        animation-duration: 275ms;
       }
 
-      .exit-animation > * {
+      .exit-animation,
+      .exit-animation > .dropdown-content {
         animation-duration: 200ms;
-        animation-name: expand-animationInverse;
         animation-direction: reverse;
       }
 
@@ -246,7 +244,6 @@
           transform: scale(1, 1);
         }
       }
-
     </style>
 
     <div id="trigger" on-tap="toggle">
@@ -397,28 +394,6 @@
             value: false
           },
 
-          /**
-           * This property is deprecated and will be ignored.
-           * @deprecated
-           */
-          openAnimationConfig: {
-            type: Object,
-            value: function() {
-              return [];
-            }
-          },
-
-          /**
-           * This property is deprecated and will be ignored.
-           * @deprecated
-           */
-          closeAnimationConfig: {
-            type: Object,
-            value: function() {
-              return [];
-            }
-          },
-
           /**
            * By default, the dropdown will constrain scrolling on the page
            * to itself when opened.

From 1fb4bdb3713854a4763e25260a5f8cd184611f32 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Thu, 29 Mar 2018 22:49:56 -0700
Subject: [PATCH 06/11] update-types

---
 paper-menu-button.d.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/paper-menu-button.d.ts b/paper-menu-button.d.ts
index f85ad24..cb491b9 100644
--- a/paper-menu-button.d.ts
+++ b/paper-menu-button.d.ts
@@ -118,16 +118,6 @@ declare class PaperMenuButton extends Polymer.Element {
    */
   closeOnActivate: boolean|null|undefined;
 
-  /**
-   * This property is deprecated and will be ignored.
-   */
-  openAnimationConfig: object|null|undefined;
-
-  /**
-   * This property is deprecated and will be ignored.
-   */
-  closeAnimationConfig: object|null|undefined;
-
   /**
    * By default, the dropdown will constrain scrolling on the page
    * to itself when opened.

From 653e45a035da9f0ae3d4e26cef5ca41e68f900ec Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 00:58:20 -0700
Subject: [PATCH 07/11] mark private methods

---
 paper-menu-button.d.ts | 34 ----------------------------------
 paper-menu-button.html |  7 +++++++
 2 files changed, 7 insertions(+), 34 deletions(-)

diff --git a/paper-menu-button.d.ts b/paper-menu-button.d.ts
index cb491b9..9274152 100644
--- a/paper-menu-button.d.ts
+++ b/paper-menu-button.d.ts
@@ -144,14 +144,6 @@ declare class PaperMenuButton extends Polymer.Element {
    */
   readonly contentElement: any;
 
-  /**
-   * If the dropdown is open when disabled becomes true, close the
-   * dropdown.
-   *
-   * @param disabled True if disabled, otherwise false.
-   */
-  _disabledChanged(disabled: boolean): void;
-
   /**
    * Toggles the drowpdown content between opened and closed.
    */
@@ -167,32 +159,6 @@ declare class PaperMenuButton extends Polymer.Element {
    * Hide the dropdown content.
    */
   close(): void;
-
-  /**
-   * When an `iron-select` event is received, the dropdown should
-   * automatically close on the assumption that a value has been chosen.
-   *
-   * @param event A CustomEvent instance with type
-   * set to `"iron-select"`.
-   */
-  _onIronSelect(event: CustomEvent|null): void;
-
-  /**
-   * Closes the dropdown when an `iron-activate` event is received if
-   * `closeOnActivate` is true.
-   *
-   * @param event A CustomEvent of type 'iron-activate'.
-   */
-  _onIronActivate(event: CustomEvent|null): void;
-
-  /**
-   * When the dropdown opens, the `paper-menu-button` fires `paper-open`.
-   * When the dropdown closes, the `paper-menu-button` fires `paper-close`.
-   *
-   * @param opened True if the dropdown is opened, otherwise false.
-   * @param oldOpened The previous value of `opened`.
-   */
-  _openedChanged(opened: boolean, oldOpened: boolean): void;
 }
 
 interface PaperMenuButton extends Polymer.IronA11yKeysBehavior, Polymer.IronControlState {
diff --git a/paper-menu-button.html b/paper-menu-button.html
index 7d9bafd..0cd7374 100644
--- a/paper-menu-button.html
+++ b/paper-menu-button.html
@@ -481,6 +481,7 @@
          *
          * @param {CustomEvent} event A CustomEvent instance with type
          * set to `"iron-select"`.
+         * @private
          */
         _onIronSelect: function(event) {
           if (!this.ignoreSelect) {
@@ -493,6 +494,7 @@
          * `closeOnActivate` is true.
          *
          * @param {CustomEvent} event A CustomEvent of type 'iron-activate'.
+         * @private
          */
         _onIronActivate: function(event) {
           if (this.closeOnActivate) {
@@ -506,6 +508,7 @@
          *
          * @param {boolean} opened True if the dropdown is opened, otherwise false.
          * @param {boolean} oldOpened The previous value of `opened`.
+         * @private
          */
         _openedChanged: function(opened, oldOpened) {
           if (opened) {
@@ -526,6 +529,7 @@
          * dropdown.
          *
          * @param {boolean} disabled True if disabled, otherwise false.
+         * @private
          */
         _disabledChanged: function(disabled) {
           Polymer.IronControlState._disabledChanged.apply(this, arguments);
@@ -534,6 +538,9 @@
           }
         },
 
+        /**
+         * @private
+         */
         __onIronOverlayCanceled: function(event) {
           var uiEvent = event.detail;
           var target = Polymer.dom(uiEvent).rootTarget;

From 96e13fff3d810c35456fc05e2e5a53cfb4140728 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 17:15:33 -0700
Subject: [PATCH 08/11] warn about open/closeAnimationConfig usages

---
 paper-menu-button.d.ts | 15 ++++++++
 paper-menu-button.html | 78 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+)

diff --git a/paper-menu-button.d.ts b/paper-menu-button.d.ts
index 9274152..f724e45 100644
--- a/paper-menu-button.d.ts
+++ b/paper-menu-button.d.ts
@@ -118,6 +118,20 @@ declare class PaperMenuButton extends Polymer.Element {
    */
   closeOnActivate: boolean|null|undefined;
 
+  /**
+   * Deprecated, setting it won't have effects on the animation.
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+   * here to not break bindings.
+   */
+  openAnimationConfig: object|null|undefined;
+
+  /**
+   * Deprecated, setting it won't have effects on the animation.
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+   * here to not break bindings.
+   */
+  closeAnimationConfig: object|null|undefined;
+
   /**
    * By default, the dropdown will constrain scrolling on the page
    * to itself when opened.
@@ -143,6 +157,7 @@ declare class PaperMenuButton extends Polymer.Element {
    *          
    */
   readonly contentElement: any;
+  ready(): void;
 
   /**
    * Toggles the drowpdown content between opened and closed.
diff --git a/paper-menu-button.html b/paper-menu-button.html
index 0cd7374..cd50c1c 100644
--- a/paper-menu-button.html
+++ b/paper-menu-button.html
@@ -394,6 +394,76 @@
             value: false
           },
 
+          /**
+           * Deprecated, setting it won't have effects on the animation.
+           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+           * here to not break bindings.
+           * @deprecated
+           */
+          openAnimationConfig: {
+            type: Object,
+            value: function() {
+              var config = [{
+                name: 'fade-in-animation',
+                timing: {
+                  delay: 100,
+                  duration: 200
+                }
+              }, {
+                name: 'paper-menu-grow-width-animation',
+                timing: {
+                  delay: 100,
+                  duration: 150,
+                  easing: config.ANIMATION_CUBIC_BEZIER
+                }
+              }, {
+                name: 'paper-menu-grow-height-animation',
+                timing: {
+                  delay: 100,
+                  duration: 275,
+                  easing: config.ANIMATION_CUBIC_BEZIER
+                }
+              }];
+              // HACK: Mark it so we know if to warn or not on ready.
+              config.__default = true;
+              return config;
+            }
+          },
+
+          /**
+           * Deprecated, setting it won't have effects on the animation.
+           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+           * here to not break bindings.
+           * @deprecated
+           */
+          closeAnimationConfig: {
+            type: Object,
+            value: function() {
+              var config = [{
+                name: 'fade-out-animation',
+                timing: {
+                  duration: 150
+                }
+              }, {
+                name: 'paper-menu-shrink-width-animation',
+                timing: {
+                  delay: 100,
+                  duration: 50,
+                  easing: config.ANIMATION_CUBIC_BEZIER
+                }
+              }, {
+                name: 'paper-menu-shrink-height-animation',
+                timing: {
+                  duration: 200,
+                  easing: 'ease-in'
+                }
+              }];
+              // HACK: Mark it so we know if to warn or not on ready.
+              config.__default = true;
+              return config;
+            }
+          },
+
           /**
            * By default, the dropdown will constrain scrolling on the page
            * to itself when opened.
@@ -445,6 +515,14 @@
           }
         },
 
+        ready: function() {
+          if ((this.openAnimationConfig && !this.openAnimationConfig.__default) ||
+              (this.closeAnimationConfig && !this.closeAnimationConfig.__default)) {
+            console.warn('Configuring animations through openAnimationConfig ' +
+              'or closeAnimationConfig is no longer supported.');
+          }
+        },
+
         /**
          * Toggles the drowpdown content between opened and closed.
          */

From d4e3fe0b18418cb74577736c09cd5d1528a38627 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 17:16:33 -0700
Subject: [PATCH 09/11] mark _dropdownContent private

---
 paper-menu-button.d.ts | 6 ------
 paper-menu-button.html | 1 +
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/paper-menu-button.d.ts b/paper-menu-button.d.ts
index f724e45..905f1ac 100644
--- a/paper-menu-button.d.ts
+++ b/paper-menu-button.d.ts
@@ -144,12 +144,6 @@ declare class PaperMenuButton extends Polymer.Element {
    * Whether focus should be restored to the button when the menu closes.
    */
   restoreFocusOnClose: boolean|null|undefined;
-
-  /**
-   * This is the element intended to be bound as the focus target
-   * for the `iron-dropdown` contained by `paper-menu-button`.
-   */
-  _dropdownContent: object|null|undefined;
   hostAttributes: object|null;
 
   /**
diff --git a/paper-menu-button.html b/paper-menu-button.html
index cd50c1c..9b407c3 100644
--- a/paper-menu-button.html
+++ b/paper-menu-button.html
@@ -486,6 +486,7 @@
           /**
            * This is the element intended to be bound as the focus target
            * for the `iron-dropdown` contained by `paper-menu-button`.
+           * @private
            */
           _dropdownContent: {
             type: Object

From 7cfffbdc5c7c88e8ac868a104535df4e9958f83c Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 17:20:10 -0700
Subject: [PATCH 10/11] restore config as in master

---
 paper-menu-button.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/paper-menu-button.html b/paper-menu-button.html
index 9b407c3..f2f43b7 100644
--- a/paper-menu-button.html
+++ b/paper-menu-button.html
@@ -276,6 +276,11 @@
     (function() {
       'use strict';
 
+      var config = {
+        ANIMATION_CUBIC_BEZIER: 'cubic-bezier(.3,.95,.5,1)',
+        MAX_ANIMATION_TIME_MS: 400
+      };
+
       var PaperMenuButton = Polymer({
         is: 'paper-menu-button',
 
@@ -632,6 +637,10 @@
         }
       });
 
+      Object.keys(config).forEach(function (key) {
+        PaperMenuButton[key] = config[key];
+      });
+
       Polymer.PaperMenuButton = PaperMenuButton;
     })();
   </script>

From 6bf0e3dffac4e39520ac53ecdfbe2b9db53a3dfa Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 17:35:34 -0700
Subject: [PATCH 11/11] rename variable to defaultValue

---
 paper-menu-button.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/paper-menu-button.html b/paper-menu-button.html
index f2f43b7..de23a35 100644
--- a/paper-menu-button.html
+++ b/paper-menu-button.html
@@ -408,7 +408,7 @@
           openAnimationConfig: {
             type: Object,
             value: function() {
-              var config = [{
+              var defaultValue = [{
                 name: 'fade-in-animation',
                 timing: {
                   delay: 100,
@@ -430,8 +430,8 @@
                 }
               }];
               // HACK: Mark it so we know if to warn or not on ready.
-              config.__default = true;
-              return config;
+              defaultValue.__default = true;
+              return defaultValue;
             }
           },
 
@@ -444,7 +444,7 @@
           closeAnimationConfig: {
             type: Object,
             value: function() {
-              var config = [{
+              var defaultValue = [{
                 name: 'fade-out-animation',
                 timing: {
                   duration: 150
@@ -464,8 +464,8 @@
                 }
               }];
               // HACK: Mark it so we know if to warn or not on ready.
-              config.__default = true;
-              return config;
+              defaultValue.__default = true;
+              return defaultValue;
             }
           },