From 185b065d6ced97c5ff9c1e8ccaee918f4347af0e Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 14 Mar 2018 12:23:06 -0700
Subject: [PATCH 01/15] remove neon-animation dependency

---
 bower.json                      |   8 +-
 demo/grow-height-animation.html | 166 ++++++++++---
 demo/index.html                 | 425 ++++++++++++++++----------------
 demo/x-select.html              | 135 ++++------
 iron-dropdown.html              | 157 ++++++++----
 test/iron-dropdown.html         |   9 +-
 6 files changed, 504 insertions(+), 396 deletions(-)

diff --git a/bower.json b/bower.json
index a6d014a..e5072d8 100644
--- a/bower.json
+++ b/bower.json
@@ -21,14 +21,12 @@
   "dependencies": {
     "polymer": "Polymer/polymer#1.9 - 2",
     "iron-behaviors": "PolymerElements/iron-behaviors#1 - 2",
-    "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.2.0",
-    "neon-animation": "PolymerElements/neon-animation#1 - 2"
+    "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.2.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
     "iron-test-helpers": "PolymerElements/iron-test-helpers#1 - 2",
-    "web-animations-js": "web-animations/web-animations-js#^2.2.0",
     "iron-image": "PolymerElements/iron-image#1 - 2",
     "web-component-tester": "^6.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
@@ -38,14 +36,12 @@
       "dependencies": {
         "polymer": "Polymer/polymer#^1.9",
         "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
-        "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.2.0",
-        "neon-animation": "PolymerElements/neon-animation#^1.0.0"
+        "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^2.2.0"
       },
       "devDependencies": {
         "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
         "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
         "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
-        "web-animations-js": "web-animations/web-animations-js#^2.2.0",
         "iron-image": "PolymerElements/iron-image#^1.0.0",
         "web-component-tester": "^4.0.0",
         "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
diff --git a/demo/grow-height-animation.html b/demo/grow-height-animation.html
index e2fdc44..85f12d5 100644
--- a/demo/grow-height-animation.html
+++ b/demo/grow-height-animation.html
@@ -1,36 +1,130 @@
-<!--
-@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/neon-animation-behavior.html">
-
-<script>
-  Polymer({
-    is: 'expand-animation',
-
-    behaviors: [
-      Polymer.NeonAnimationBehavior
-    ],
-
-    configure: function(config) {
-      var node = config.node;
-
-      var height = node.getBoundingClientRect().height;
-
-      this._effect = new KeyframeEffect(node, [{
-        height: (height / 2) + 'px'
-      }, {
-        height: height + 'px'
-      }], this.timingFromConfig(config));
-
-      return this._effect;
-    }
-  });
-</script>
+<!--
+@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">
+<dom-module id="grow-height-animations">
+  <template>
+    <style>
+
+      iron-dropdown {
+        box-shadow: var(--iron-dropdown-box-shadow, none);
+        border: var(--iron-dropdown-border, none);
+      }
+
+      .expand-animation {
+        overflow: hidden;
+        contain: content;
+        will-change: opacity, transform;
+        animation-duration: 200ms;
+        animation-delay: 150ms;
+        animation-fill-mode: both;
+        animation-timing-function: step-end;
+        animation-name: expand-animation;
+        --iron-dropdown-content-wrapper-animation: {
+          overflow: hidden;
+          contain: content;
+          animation-duration: 200ms;
+          will-change: transform;
+          animation-delay: 150ms;
+          animation-fill-mode: both;
+          animation-timing-function: step-end;
+          animation-name: expand-animationInverse;
+        };
+      }
+
+      /**
+        * Generated with https://valdrinkoshi.github.io/animation-keyframes/#animationName=expand-animation&duration=200&fps=60&presetIndex=6&easeCallbackIndex=4&fromScaleX=1&fromScaleY=0.5&toScaleX=1&toScaleY=1&customizedStyles=transform-origin:%20left%20top;%0A%20animation-fill-mode:%20both;%0A%20animation-delay:%20150ms;
+        * Manually added opacity animation from 0 at 0% to 1 at 25%
+      */
+
+      @keyframes expand-animation {
+        0% {
+          transform: scaleY(0.5);
+          opacity: 0;
+        }
+        9.09091% {
+          transform: scaleY(0.57328);
+          opacity: 0.25;
+        }
+        18.18182% {
+          transform: scaleY(0.64116);
+          opacity: 0.5;
+        }
+        27.27273% {
+          transform: scaleY(0.70448);
+          opacity: 1;
+        }
+        36.36364% {
+          transform: scaleY(0.76325);
+        }
+        45.45455% {
+          transform: scaleY(0.81724);
+        }
+        54.54545% {
+          transform: scaleY(0.86603);
+        }
+        63.63636% {
+          transform: scaleY(0.90902);
+        }
+        72.72727% {
+          transform: scaleY(0.94535);
+        }
+        81.81818% {
+          transform: scaleY(0.97387);
+        }
+        90.90909% {
+          transform: scaleY(0.9929);
+        }
+        100% {
+          transform: scaleY(1);
+        }
+      }
+
+      @keyframes expand-animationInverse {
+        0% {
+          transform: scaleY(2);
+        }
+        9.09091% {
+          transform: scaleY(1.74435);
+        }
+        18.18182% {
+          transform: scaleY(1.55967);
+        }
+        27.27273% {
+          transform: scaleY(1.41949);
+        }
+        36.36364% {
+          transform: scaleY(1.31019);
+        }
+        45.45455% {
+          transform: scaleY(1.22363);
+        }
+        54.54545% {
+          transform: scaleY(1.15469);
+        }
+        63.63636% {
+          transform: scaleY(1.10009);
+        }
+        72.72727% {
+          transform: scaleY(1.05781);
+        }
+        81.81818% {
+          transform: scaleY(1.02683);
+        }
+        90.90909% {
+          transform: scaleY(1.00715);
+        }
+        100% {
+          transform: scaleY(1);
+        }
+      }
+    </style>
+  </template>
+</dom-module>
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 15f7480..69da35d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,211 +1,214 @@
-<!doctype html>
-<!--
-@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
--->
-<html>
-
-<head>
-
-  <title>iron-dropdown</title>
-
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-
-  <link rel="import" href="../../iron-image/iron-image.html">
-  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
-  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
-  <link rel="import" href="../../neon-animation/web-animations.html">
-
-  <link rel="import" href="x-select.html">
-
-  <custom-style><style is="custom-style" include="demo-pages-shared-styles">
-    demo-snippet {
-      --demo-snippet-code: {
-        max-height: 250px;
-      }
-    }
-
-    [slot="dropdown-content"] {
-      background-color: white;
-      line-height: 20px;
-      border-radius: 3px;
-      box-shadow: 0px 2px 6px #ccc;
-    }
-
-    .random-content {
-      padding: 1.5em 2em;
-      max-width: 250px;
-    }
-
-    button {
-      border: 1px solid #ccc;
-      background-color: #eee;
-      padding: 1em;
-      border-radius: 3px;
-      cursor: pointer;
-    }
-
-    button:focus {
-      outline: none;
-      border-color: blue;
-    }
-
-    ul, li {
-      display: block;
-      position: relative;
-      margin: 0;
-      padding: 0;
-    }
-
-    a {
-      display: block;
-      position: relative;
-      padding: 1em;
-      text-decoration: none;
-    }
-
-    li:not(:last-of-type) {
-      border-bottom: 1px solid #eee;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
-
-    iron-image {
-      padding: 1em;
-      background-color: #fff;
-      box-shadow: 0px 2px 6px #ccc;
-      border-radius: 3px;
-    }
-  </style></custom-style>
-</head>
-
-<body unresolved class="centered">
-  <h3>Basic</h3>
-  <demo-snippet class="centered-demo">
-    <template>
-      <x-select>
-        <button slot="dropdown-trigger">Basic</button>
-        <div slot="dropdown-content" class="random-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </div>
-      </x-select>
-      <x-select>
-        <button slot="dropdown-trigger">Overflowing</button>
-        <div slot="dropdown-content" class="random-content">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
-            quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
-            eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
-            reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
-        </div>
-      </x-select>
-    </template>
-  </demo-snippet>
-
-  <h3>Alignment</h3>
-  <demo-snippet class="centered-demo">
-    <template>
-      <x-select vertical-align="bottom">
-        <button slot="dropdown-trigger">Bottom-left Aligned</button>
-        <div slot="dropdown-content" class="random-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </div>
-      </x-select>
-      <x-select horizontal-align="right" vertical-align="top">
-        <button slot="dropdown-trigger">Top-right Aligned</button>
-        <div slot="dropdown-content" class="random-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </div>
-      </x-select>
-    </template>
-  </demo-snippet>
-
-  <h3>Scroll actions</h3>
-  <demo-snippet class="centered-demo">
-    <template>
-      <x-select scroll-action="refit">
-        <button slot="dropdown-trigger">Refit on scroll</button>
-        <div slot="dropdown-content" class="random-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </div>
-      </x-select>
-      <x-select scroll-action="cancel">
-        <button slot="dropdown-trigger">Close on scroll</button>
-        <div slot="dropdown-content" class="random-content">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </div>
-      </x-select>
-    </template>
-  </demo-snippet>
-
-  <h3>Content</h3>
-  <demo-snippet class="centered-demo">
-    <template>
-      <x-select horizontal-align="left" vertical-align="top">
-        <button slot="dropdown-trigger">Content</button>
-        <iron-image slot="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
-      </x-select>
-      <x-select horizontal-align="right" vertical-align="top">
-        <button slot="dropdown-trigger">Unordered list</button>
-        <ul slot="dropdown-content" tabindex="0">
-          <dom-repeat id="Demo">
-            <template is="dom-repeat">
-              <li><a href="javascript:void(0)">[[item]]</a></li>
-            </template>
-          </dom-repeat>
-        </ul>
-      </x-select>
-
-      <script>
-        Demo.items = [
-          'allosaurus',
-          'brontosaurus',
-          'carcharodontosaurus',
-          'diplodocus',
-          'ekrixinatosaurus',
-          'fukuiraptor',
-          'gallimimus',
-          'hadrosaurus',
-          'iguanodon',
-          'jainosaurus',
-          'kritosaurus',
-          'liaoceratops',
-          'megalosaurus',
-          'nemegtosaurus',
-          'ornithomimus',
-          'protoceratops',
-          'quetecsaurus',
-          'rajasaurus',
-          'stegosaurus',
-          'triceratops',
-          'utahraptor',
-          'vulcanodon',
-          'wannanosaurus',
-          'xenoceratops',
-          'yandusaurus',
-          'zephyrosaurus'
-        ];
-        // Support hybrid mode.
-        Demo.firstElementChild.items = Demo.items;
-      </script>
-    </template>
-  </demo-snippet>
-
-
-
-</body>
-
-</html>
+<!doctype html>
+<!--
+@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
+-->
+<html>
+
+<head>
+
+  <title>iron-dropdown</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../iron-image/iron-image.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+
+  <link rel="import" href="x-select.html">
+
+  <custom-style><style is="custom-style" include="demo-pages-shared-styles">
+    demo-snippet {
+      --demo-snippet-code: {
+        max-height: 250px;
+      }
+    }
+
+    html {
+      --iron-dropdown-box-shadow: 0px 2px 6px #ccc;
+      /* --iron-dropdown-border: 1px solid; */
+    }
+
+    [slot="dropdown-content"] {
+      background-color: white;
+      line-height: 20px;
+      border-radius: 3px;
+    }
+
+    .random-content {
+      padding: 1.5em 2em;
+      max-width: 250px;
+    }
+
+    button {
+      border: 1px solid #ccc;
+      background-color: #eee;
+      padding: 1em;
+      border-radius: 3px;
+      cursor: pointer;
+    }
+
+    button:focus {
+      outline: none;
+      border-color: blue;
+    }
+
+    ul, li {
+      display: block;
+      position: relative;
+      margin: 0;
+      padding: 0;
+    }
+
+    a {
+      display: block;
+      position: relative;
+      padding: 1em;
+      text-decoration: none;
+    }
+
+    li:not(:last-of-type) {
+      border-bottom: 1px solid #eee;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    iron-image {
+      padding: 1em;
+      background-color: #fff;
+      box-shadow: 0px 2px 6px #ccc;
+      border-radius: 3px;
+    }
+  </style></custom-style>
+</head>
+
+<body unresolved class="centered">
+  <h3>Basic</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <x-select>
+        <button slot="dropdown-trigger">Basic</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select>
+      <x-select>
+        <button slot="dropdown-trigger">Overflowing</button>
+        <div slot="dropdown-content" class="random-content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
+            quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+            eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
+            reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+        </div>
+      </x-select>
+    </template>
+  </demo-snippet>
+
+  <h3>Alignment</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <x-select vertical-align="bottom">
+        <button slot="dropdown-trigger">Bottom-left Aligned</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select>
+      <x-select horizontal-align="right" vertical-align="top">
+        <button slot="dropdown-trigger">Top-right Aligned</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select>
+    </template>
+  </demo-snippet>
+
+  <h3>Scroll actions</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <x-select scroll-action="refit">
+        <button slot="dropdown-trigger">Refit on scroll</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select>
+      <x-select scroll-action="cancel">
+        <button slot="dropdown-trigger">Close on scroll</button>
+        <div slot="dropdown-content" class="random-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+      </x-select>
+    </template>
+  </demo-snippet>
+
+  <h3>Content</h3>
+  <demo-snippet class="centered-demo">
+    <template>
+      <x-select horizontal-align="left" vertical-align="top">
+        <button slot="dropdown-trigger">Content</button>
+        <iron-image slot="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
+      </x-select>
+      <x-select horizontal-align="right" vertical-align="top">
+        <button slot="dropdown-trigger">Unordered list</button>
+        <ul slot="dropdown-content" tabindex="0">
+          <dom-repeat id="Demo">
+            <template is="dom-repeat">
+              <li><a href="javascript:void(0)">[[item]]</a></li>
+            </template>
+          </dom-repeat>
+        </ul>
+      </x-select>
+
+      <script>
+        Demo.items = [
+          'allosaurus',
+          'brontosaurus',
+          'carcharodontosaurus',
+          'diplodocus',
+          'ekrixinatosaurus',
+          'fukuiraptor',
+          'gallimimus',
+          'hadrosaurus',
+          'iguanodon',
+          'jainosaurus',
+          'kritosaurus',
+          'liaoceratops',
+          'megalosaurus',
+          'nemegtosaurus',
+          'ornithomimus',
+          'protoceratops',
+          'quetecsaurus',
+          'rajasaurus',
+          'stegosaurus',
+          'triceratops',
+          'utahraptor',
+          'vulcanodon',
+          'wannanosaurus',
+          'xenoceratops',
+          'yandusaurus',
+          'zephyrosaurus'
+        ];
+        // Support hybrid mode.
+        Demo.firstElementChild.items = Demo.items;
+      </script>
+    </template>
+  </demo-snippet>
+
+
+
+</body>
+
+</html>
diff --git a/demo/x-select.html b/demo/x-select.html
index 3944411..a049d8f 100644
--- a/demo/x-select.html
+++ b/demo/x-select.html
@@ -1,82 +1,53 @@
-<!--
-@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="../iron-dropdown.html">
-<link rel="import" href="../../neon-animation/neon-animations.html">
-<link rel="import" href="grow-height-animation.html">
-
-<dom-module id="x-select">
-  <template>
-    <style>
-      :host {
-        display: inline-block;
-        margin: 1em;
-      }
-    </style>
-    <div on-tap="open">
-      <slot name="dropdown-trigger"></slot>
-    </div>
-    <iron-dropdown id="dropdown"
-      vertical-align="[[verticalAlign]]"
-      horizontal-align="[[horizontalAlign]]"
-      disabled="[[disabled]]"
-      scroll-action="[[scrollAction]]"
-      open-animation-config="[[openAnimationConfig]]"
-      close-animation-config="[[closeAnimationConfig]]">
-      <slot name="dropdown-content" slot="dropdown-content"></slot>
-    </iron-dropdown>
-  </template>
-  <script>
-    Polymer({
-      is: 'x-select',
-
-      properties: {
-        verticalAlign: String,
-        horizontalAlign: String,
-        disabled: Boolean,
-        scrollAction: String,
-        openAnimationConfig: {
-          type: Array,
-          value: function() {
-            return [{
-              name: 'fade-in-animation',
-              timing: {
-                delay: 150,
-                duration: 50
-              }
-            }, {
-              name: 'expand-animation',
-              timing: {
-                delay: 150,
-                duration: 200
-              }
-            }];
-          }
-        },
-
-        closeAnimationConfig: {
-          type: Array,
-          value: function() {
-            return [{
-              name: 'fade-out-animation',
-              timing: {
-                duration: 200
-              }
-            }];
-          }
-        }
-      },
-
-      open: function() {
-        this.$.dropdown.open();
-      }
-    });
-  </script>
-</dom-module>
+<!--
+@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="../iron-dropdown.html">
+<link rel="import" href="grow-height-animation.html">
+
+<dom-module id="x-select">
+  <template>
+    <style include="grow-height-animations">
+      :host {
+        display: inline-block;
+        margin: 1em;
+      }
+    </style>
+    <div on-tap="open">
+      <slot name="dropdown-trigger"></slot>
+    </div>
+    <iron-dropdown id="dropdown"
+      vertical-align$="[[verticalAlign]]"
+      horizontal-align$="[[horizontalAlign]]"
+      disabled="[[disabled]]"
+      scroll-action="[[scrollAction]]"
+      entry-animation="expand-animation"
+      exit-animation="fade-out-animation">
+      <!-- <div slot="dropdown-content"> -->
+        <slot name="dropdown-content" slot="dropdown-content"></slot>
+      <!-- </div> -->
+    </iron-dropdown>
+  </template>
+  <script>
+    Polymer({
+      is: 'x-select',
+
+      properties: {
+        verticalAlign: String,
+        horizontalAlign: String,
+        disabled: Boolean,
+        scrollAction: String,
+      },
+
+      open: function() {
+        this.$.dropdown.open();
+      }
+    });
+  </script>
+</dom-module>
diff --git a/iron-dropdown.html b/iron-dropdown.html
index 88985d7..69f507d 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -11,7 +11,6 @@
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../iron-behaviors/iron-control-state.html">
 <link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
-<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
 <!--TODO remove this import -->
 <link rel="import" href="iron-dropdown-scroll-manager.html">
 
@@ -56,6 +55,50 @@
         overflow: hidden;
         pointer-events: none;
       }
+
+      #contentWrapper {
+        /* TODO(valdrin) evaluate which props to expose */
+        @apply --iron-dropdown-content-wrapper-animation;
+      }
+
+      :host, #contentWrapper {
+        transform-origin: left top;
+      }
+
+      :host([horizontal-align="right"][vertical-align="top"]),
+      :host([horizontal-align="right"][vertical-align="top"]) #contentWrapper {
+        transform-origin: right top;
+      }
+
+      :host([horizontal-align="left"][vertical-align="bottom"]),
+      :host([horizontal-align="left"][vertical-align="bottom"]) #contentWrapper {
+        transform-origin: left bottom;
+      }
+
+      :host([horizontal-align="right"][vertical-align="bottom"]),
+      :host([horizontal-align="right"][vertical-align="bottom"]) #contentWrapper {
+        transform-origin: right bottom;
+      }
+
+      :host(.fade-in-animation) {
+        animation-name: fade-in-animation;
+      }
+
+      @keyframes fade-in-animation {
+        from {
+          opacity: 0;
+        }
+      }
+
+      :host(.fade-out-animation) {
+        animation-name: fade-out-animation;
+      }
+
+      @keyframes fade-out-animation {
+        to {
+          opacity: 0;
+        }
+      }
     </style>
 
     <div id="contentWrapper">
@@ -73,8 +116,7 @@
         behaviors: [
           Polymer.IronControlState,
           Polymer.IronA11yKeysBehavior,
-          Polymer.IronOverlayBehavior,
-          Polymer.NeonAnimationRunnerBehavior
+          Polymer.IronOverlayBehavior
         ],
 
         properties: {
@@ -100,24 +142,12 @@
             reflectToAttribute: true
           },
 
-          /**
-           * An animation config. If provided, this will be used to animate the
-           * opening of the dropdown. Pass an Array for multiple animations.
-           * See `neon-animation` documentation for more animation configuration
-           * details.
-           */
-          openAnimationConfig: {
-            type: Object
+          entryAnimation: {
+            type: String
           },
 
-          /**
-           * An animation config. If provided, this will be used to animate the
-           * closing of the dropdown. Pass an Array for multiple animations.
-           * See `neon-animation` documentation for more animation configuration
-           * details.
-           */
-          closeAnimationConfig: {
-            type: Object
+          exitAnimation: {
+            type: String
           },
 
           /**
@@ -153,7 +183,7 @@
         },
 
         listeners: {
-          'neon-animation-finish': '_onNeonAnimationFinish'
+          'animationend': '_onAnimationEnd'
         },
 
         observers: [
@@ -181,7 +211,7 @@
           this._readied = true;
         },
 
-        attached: function () {
+        attached: function() {
           if (!this.sizingTarget || this.sizingTarget === this) {
             this.sizingTarget = this.containedElement || this;
           }
@@ -191,42 +221,56 @@
           this.cancelAnimation();
         },
 
+        cancelAnimation: function() {
+          this.classList.remove(this.entryAnimation);
+          this.classList.remove(this.exitAnimation);
+          this.$.contentWrapper.classList.remove('animating');
+        },
+
+        /**
+         * @param {string=} animation
+         */
+        playAnimation: function(animation) {
+          if (!this.noAnimations && animation) {
+            this.$.contentWrapper.classList.add('animating');
+            this.classList.add(animation);
+            if (this._willAnimate() === false) {
+              console.info(animation + ' animation was not played');
+              this._onAnimationEnd();
+            }
+          } else {
+            this._onAnimationEnd();
+          }
+        },
+
         /**
          * Called when the value of `opened` changes.
          * Overridden from `IronOverlayBehavior`
+         * @private
          */
         _openedChanged: function() {
           if (this.opened && this.disabled) {
             this.cancel();
           } else {
             this.cancelAnimation();
-            this._updateAnimationConfig();
             Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
           }
         },
 
         /**
          * Overridden from `IronOverlayBehavior`.
+         * @private
          */
         _renderOpened: function() {
-          if (!this.noAnimations && this.animationConfig.open) {
-            this.$.contentWrapper.classList.add('animating');
-            this.playAnimation('open');
-          } else {
-            Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
-          }
+          this.playAnimation(this.entryAnimation);
         },
 
         /**
          * Overridden from `IronOverlayBehavior`.
+         * @private
          */
         _renderClosed: function() {
-          if (!this.noAnimations && this.animationConfig.close) {
-            this.$.contentWrapper.classList.add('animating');
-            this.playAnimation('close');
-          } else {
-            Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
-          }
+          this.playAnimation(this.exitAnimation);
         },
 
         /**
@@ -234,36 +278,31 @@
          * closing). Responsible for "completing" the process of opening or
          * closing the dropdown by positioning it or setting its display to
          * none.
+         * @param {Event=} event
+         * @private
          */
-        _onNeonAnimationFinish: function() {
+        _onAnimationEnd: function(event) {
+          if (event && event.target !== this) {
+            return;
+          }
           this.$.contentWrapper.classList.remove('animating');
           if (this.opened) {
+            this.classList.remove(this.entryAnimation);
             this._finishRenderOpened();
           } else {
+            // Ensure to update display before removing the 
+            // animation class, so that user doesn't see flickering
+            // e.g. dialog returning to its initial position/opacity.
+            this.style.display = 'none';
+            this.classList.remove(this.exitAnimation);
             this._finishRenderClosed();
           }
         },
-        
-        /**
-         * Constructs the final animation config from different properties used
-         * to configure specific parts of the opening and closing animations.
-         */
-        _updateAnimationConfig: function() {
-          // Update the animation node to be the containedElement.
-          var animationNode = this.containedElement;
-          var animations = [].concat(this.openAnimationConfig || []).concat(this.closeAnimationConfig || []);
-          for (var i = 0; i < animations.length; i++) {
-            animations[i].node = animationNode;
-          }
-          this.animationConfig = {
-            open: this.openAnimationConfig,
-            close: this.closeAnimationConfig
-          };
-        },
 
         /**
          * Updates the overlay position based on configured horizontal
          * and vertical alignment.
+         * @private
          */
         _updateOverlayPosition: function() {
           if (this.isAttached) {
@@ -275,6 +314,7 @@
         /**
          * Sets scrollAction according to the value of allowOutsideScroll.
          * Prefer setting directly scrollAction.
+         * @private
          */
         _allowOutsideScrollChanged: function(allowOutsideScroll) {
           // Wait until initial values are all set.
@@ -290,6 +330,7 @@
 
         /**
          * Apply focus to focusTarget or containedElement
+         * @private
          */
         _applyFocus: function() {
           var focusTarget = this.focusTarget || this.containedElement;
@@ -298,8 +339,18 @@
           } else {
             Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments);
           }
+        },
+
+        /**
+         * @private
+         */
+        _willAnimate: function() {
+          // If CSS Class does not have animation-name considered not be an animation
+          var style = getComputedStyle(this);
+          return (style.getPropertyValue('animation-name') !== 'none' &&
+            style.getPropertyValue('animation-duration') !== '0ms');
         }
       });
     })();
   </script>
-</dom-module>
+</dom-module>
\ No newline at end of file
diff --git a/test/iron-dropdown.html b/test/iron-dropdown.html
index e154799..9ff027c 100644
--- a/test/iron-dropdown.html
+++ b/test/iron-dropdown.html
@@ -20,8 +20,6 @@
   <script src="../../iron-test-helpers/mock-interactions.js"></script>
 
   <link rel="import" href="../iron-dropdown.html">
-  <link rel="import" href="../../neon-animation/web-animations.html">
-  <link rel="import" href="../../neon-animation/animations/fade-in-animation.html">
 
 </head>
 <style>
@@ -315,12 +313,7 @@
           });
 
           test('no pointer events during animation', function(done) {
-            dropdown.openAnimationConfig = [{
-              name: 'fade-in-animation',
-              timing: {
-                duration: 300
-              }
-            }];
+            dropdown.entryAnimation = 'fade-in-animation';
             dropdown.open();
             setTimeout(function() {
               assert.equal(getComputedStyle(content).pointerEvents, 'none', 'content is interactive');

From d2a91697181206dce0fe7fefa706881467b0a0ef Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 14 Mar 2018 17:09:02 -0700
Subject: [PATCH 02/15] remove contentWrapper

---
 demo/grow-height-animation.html | 29 +++++++++--------
 demo/x-select.html              |  6 ++--
 iron-dropdown.html              | 55 +++++++++++++++++++++------------
 3 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/demo/grow-height-animation.html b/demo/grow-height-animation.html
index 85f12d5..edfdc6c 100644
--- a/demo/grow-height-animation.html
+++ b/demo/grow-height-animation.html
@@ -12,31 +12,30 @@
 <dom-module id="grow-height-animations">
   <template>
     <style>
-
-      iron-dropdown {
+      iron-dropdown,
+      iron-dropdown>* {
         box-shadow: var(--iron-dropdown-box-shadow, none);
         border: var(--iron-dropdown-border, none);
+        will-change: opacity, transform;
+        animation-duration: 200ms;
       }
 
-      .expand-animation {
+      .expand-animation,
+      .expand-animation>* {
         overflow: hidden;
         contain: content;
-        will-change: opacity, transform;
-        animation-duration: 200ms;
         animation-delay: 150ms;
         animation-fill-mode: both;
         animation-timing-function: step-end;
+        /* animation-iteration-count: infinite; */
+      }
+
+      .expand-animation {
         animation-name: expand-animation;
-        --iron-dropdown-content-wrapper-animation: {
-          overflow: hidden;
-          contain: content;
-          animation-duration: 200ms;
-          will-change: transform;
-          animation-delay: 150ms;
-          animation-fill-mode: both;
-          animation-timing-function: step-end;
-          animation-name: expand-animationInverse;
-        };
+      }
+
+      .expand-animation>* {
+        animation-name: expand-animationInverse;
       }
 
       /**
diff --git a/demo/x-select.html b/demo/x-select.html
index a049d8f..8e2ecf8 100644
--- a/demo/x-select.html
+++ b/demo/x-select.html
@@ -29,9 +29,9 @@
       scroll-action="[[scrollAction]]"
       entry-animation="expand-animation"
       exit-animation="fade-out-animation">
-      <!-- <div slot="dropdown-content"> -->
-        <slot name="dropdown-content" slot="dropdown-content"></slot>
-      <!-- </div> -->
+      <div slot="dropdown-content">
+        <slot name="dropdown-content"></slot>
+      </div>
     </iron-dropdown>
   </template>
   <script>
diff --git a/iron-dropdown.html b/iron-dropdown.html
index 69f507d..8884e11 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -45,41 +45,38 @@
     <style>
       :host {
         position: fixed;
+        will-change: opacity, transform;
+        animation-duration: 200ms;
+        transform-origin: left top;
       }
 
-      #contentWrapper ::slotted(*) {
+      ::slotted(*) {
         overflow: auto;
+        transform-origin: left top;
       }
 
-      #contentWrapper.animating ::slotted(*) {
+      :host(.animating) ::slotted(*) {
         overflow: hidden;
         pointer-events: none;
       }
 
-      #contentWrapper {
-        /* TODO(valdrin) evaluate which props to expose */
-        @apply --iron-dropdown-content-wrapper-animation;
-      }
-
-      :host, #contentWrapper {
-        transform-origin: left top;
-      }
-
       :host([horizontal-align="right"][vertical-align="top"]),
-      :host([horizontal-align="right"][vertical-align="top"]) #contentWrapper {
+      :host([horizontal-align="right"][vertical-align="top"]) ::slotted(*) {
         transform-origin: right top;
       }
 
       :host([horizontal-align="left"][vertical-align="bottom"]),
-      :host([horizontal-align="left"][vertical-align="bottom"]) #contentWrapper {
+      :host([horizontal-align="left"][vertical-align="bottom"]) ::slotted(*) {
         transform-origin: left bottom;
       }
 
       :host([horizontal-align="right"][vertical-align="bottom"]),
-      :host([horizontal-align="right"][vertical-align="bottom"]) #contentWrapper {
+      :host([horizontal-align="right"][vertical-align="bottom"]) ::slotted(*) {
         transform-origin: right bottom;
       }
 
+      /* same as paper-dialog */
+
       :host(.fade-in-animation) {
         animation-name: fade-in-animation;
       }
@@ -99,11 +96,29 @@
           opacity: 0;
         }
       }
+
+      :host(.scale-up-animation) {
+        animation-name: scale-up-animation;
+      }
+
+      @keyframes scale-up-animation {
+        from {
+          transform: scale(0);
+        }
+      }
+
+      :host(.scale-down-animation) {
+        animation-name: scale-down-animation;
+      }
+
+      @keyframes scale-down-animation {
+        to {
+          transform: scale(0);
+        }
+      }
     </style>
 
-    <div id="contentWrapper">
-      <slot id="content" name="dropdown-content"></slot>
-    </div>
+    <slot id="content" name="dropdown-content"></slot>
   </template>
 
   <script>
@@ -224,7 +239,7 @@
         cancelAnimation: function() {
           this.classList.remove(this.entryAnimation);
           this.classList.remove(this.exitAnimation);
-          this.$.contentWrapper.classList.remove('animating');
+          this.classList.remove('animating');
         },
 
         /**
@@ -232,7 +247,7 @@
          */
         playAnimation: function(animation) {
           if (!this.noAnimations && animation) {
-            this.$.contentWrapper.classList.add('animating');
+            this.classList.add('animating');
             this.classList.add(animation);
             if (this._willAnimate() === false) {
               console.info(animation + ' animation was not played');
@@ -285,7 +300,7 @@
           if (event && event.target !== this) {
             return;
           }
-          this.$.contentWrapper.classList.remove('animating');
+          this.classList.remove('animating');
           if (this.opened) {
             this.classList.remove(this.entryAnimation);
             this._finishRenderOpened();

From 60bdc07c7382ef3e75041a370f74c53e80b486e0 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 14 Mar 2018 18:12:38 -0700
Subject: [PATCH 03/15] keyframes for expand animation

---
 demo/grow-height-animation.html | 31 +++++++++--------
 demo/x-select.html              | 20 +++++++++--
 iron-dropdown.html              | 62 ++++++---------------------------
 test/iron-dropdown.html         | 15 ++++++++
 4 files changed, 58 insertions(+), 70 deletions(-)

diff --git a/demo/grow-height-animation.html b/demo/grow-height-animation.html
index edfdc6c..a710043 100644
--- a/demo/grow-height-animation.html
+++ b/demo/grow-height-animation.html
@@ -12,38 +12,39 @@
 <dom-module id="grow-height-animations">
   <template>
     <style>
-      iron-dropdown,
-      iron-dropdown>* {
-        box-shadow: var(--iron-dropdown-box-shadow, none);
-        border: var(--iron-dropdown-border, none);
-        will-change: opacity, transform;
-        animation-duration: 200ms;
+      .fade-out-animation {
+        animation-name: fade-out-animation;
+      }
+
+      @keyframes fade-out-animation {
+        to {
+          opacity: 0;
+        }
       }
 
       .expand-animation,
-      .expand-animation>* {
+      .expand-animation > * {
         overflow: hidden;
         contain: content;
-        animation-delay: 150ms;
+        will-change: opacity, transform;
         animation-fill-mode: both;
         animation-timing-function: step-end;
-        /* animation-iteration-count: infinite; */
       }
 
       .expand-animation {
-        animation-name: expand-animation;
+        animation-name: expand-animation-200ms;
       }
 
-      .expand-animation>* {
-        animation-name: expand-animationInverse;
+      .expand-animation > * {
+        animation-name: expand-animation-200ms-inverse;
       }
 
       /**
-        * Generated with https://valdrinkoshi.github.io/animation-keyframes/#animationName=expand-animation&duration=200&fps=60&presetIndex=6&easeCallbackIndex=4&fromScaleX=1&fromScaleY=0.5&toScaleX=1&toScaleY=1&customizedStyles=transform-origin:%20left%20top;%0A%20animation-fill-mode:%20both;%0A%20animation-delay:%20150ms;
+        * Generated with https://valdrinkoshi.github.io/animation-keyframes/#animationName=expand-animation-200ms&duration=200&fps=60&presetIndex=6&easeCallbackIndex=4&fromScaleX=1&fromScaleY=0.5&toScaleX=1&toScaleY=1&customizedStyles=transform-origin:%20left%20top;%0A%20animation-fill-mode:%20both;%0A%20animation-delay:%20150ms;
         * Manually added opacity animation from 0 at 0% to 1 at 25%
       */
 
-      @keyframes expand-animation {
+      @keyframes expand-animation-200ms {
         0% {
           transform: scaleY(0.5);
           opacity: 0;
@@ -86,7 +87,7 @@
         }
       }
 
-      @keyframes expand-animationInverse {
+      @keyframes expand-animation-200ms-inverse {
         0% {
           transform: scaleY(2);
         }
diff --git a/demo/x-select.html b/demo/x-select.html
index 8e2ecf8..6a6fbeb 100644
--- a/demo/x-select.html
+++ b/demo/x-select.html
@@ -18,13 +18,27 @@
         display: inline-block;
         margin: 1em;
       }
+
+      /* ShadyCSS has some scoping issues, see https://github.com/webcomponents/shadycss/issues/168 */
+
+      iron-dropdown,
+      iron-dropdown > * {
+        box-shadow: var(--iron-dropdown-box-shadow, none);
+        border: var(--iron-dropdown-border, none);
+        animation-duration: 200ms;
+      }
+
+      .expand-animation,
+      .expand-animation > * {
+        animation-delay: 150ms;
+      }
     </style>
     <div on-tap="open">
       <slot name="dropdown-trigger"></slot>
     </div>
     <iron-dropdown id="dropdown"
-      vertical-align$="[[verticalAlign]]"
-      horizontal-align$="[[horizontalAlign]]"
+      vertical-align="[[verticalAlign]]"
+      horizontal-align="[[horizontalAlign]]"
       disabled="[[disabled]]"
       scroll-action="[[scrollAction]]"
       entry-animation="expand-animation"
@@ -50,4 +64,4 @@
       }
     });
   </script>
-</dom-module>
+</dom-module>
\ No newline at end of file
diff --git a/iron-dropdown.html b/iron-dropdown.html
index 8884e11..6ea8831 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -45,14 +45,10 @@
     <style>
       :host {
         position: fixed;
-        will-change: opacity, transform;
-        animation-duration: 200ms;
-        transform-origin: left top;
       }
 
       ::slotted(*) {
         overflow: auto;
-        transform-origin: left top;
       }
 
       :host(.animating) ::slotted(*) {
@@ -60,13 +56,18 @@
         pointer-events: none;
       }
 
-      :host([horizontal-align="right"][vertical-align="top"]),
-      :host([horizontal-align="right"][vertical-align="top"]) ::slotted(*) {
+      :host,
+      ::slotted(*) {
+        transform-origin: left top;
+      }
+
+      :host([horizontal-align="right"]),
+      :host([horizontal-align="right"]) ::slotted(*) {
         transform-origin: right top;
       }
 
-      :host([horizontal-align="left"][vertical-align="bottom"]),
-      :host([horizontal-align="left"][vertical-align="bottom"]) ::slotted(*) {
+      :host([vertical-align="bottom"]),
+      :host([vertical-align="bottom"]) ::slotted(*) {
         transform-origin: left bottom;
       }
 
@@ -74,50 +75,7 @@
       :host([horizontal-align="right"][vertical-align="bottom"]) ::slotted(*) {
         transform-origin: right bottom;
       }
-
-      /* same as paper-dialog */
-
-      :host(.fade-in-animation) {
-        animation-name: fade-in-animation;
-      }
-
-      @keyframes fade-in-animation {
-        from {
-          opacity: 0;
-        }
-      }
-
-      :host(.fade-out-animation) {
-        animation-name: fade-out-animation;
-      }
-
-      @keyframes fade-out-animation {
-        to {
-          opacity: 0;
-        }
-      }
-
-      :host(.scale-up-animation) {
-        animation-name: scale-up-animation;
-      }
-
-      @keyframes scale-up-animation {
-        from {
-          transform: scale(0);
-        }
-      }
-
-      :host(.scale-down-animation) {
-        animation-name: scale-down-animation;
-      }
-
-      @keyframes scale-down-animation {
-        to {
-          transform: scale(0);
-        }
-      }
     </style>
-
     <slot id="content" name="dropdown-content"></slot>
   </template>
 
@@ -131,7 +89,7 @@
         behaviors: [
           Polymer.IronControlState,
           Polymer.IronA11yKeysBehavior,
-          Polymer.IronOverlayBehavior
+          Polymer.IronOverlayBehavior,
         ],
 
         properties: {
diff --git a/test/iron-dropdown.html b/test/iron-dropdown.html
index 9ff027c..9187fce 100644
--- a/test/iron-dropdown.html
+++ b/test/iron-dropdown.html
@@ -52,6 +52,16 @@
     width: 3000px;
     height: 3000px;
   }
+
+  .fade-in-animation {
+    animation: fade-in-animation 100ms;
+  }
+
+  @keyframes fade-in-animation {
+    from {
+      opacity: 0;
+    }
+  }
 </style>
 
 <body>
@@ -250,6 +260,11 @@
         });
 
         suite('correct animationConfig setup', function() {
+          setup(function() {
+            // not supported anymore, maybe?
+            this.skip();
+          });
+          
           test('as objects', function() {
             dropdown.openAnimationConfig = {
               name: 'open-animation'

From 84bc09a6121f5cbf6ef732a21faed46f3e9a8784 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 16 Mar 2018 13:43:19 -0700
Subject: [PATCH 04/15] update types

---
 iron-dropdown.d.ts | 70 ++++------------------------------------------
 1 file changed, 5 insertions(+), 65 deletions(-)

diff --git a/iron-dropdown.d.ts b/iron-dropdown.d.ts
index c49bff8..5c25c5b 100644
--- a/iron-dropdown.d.ts
+++ b/iron-dropdown.d.ts
@@ -11,7 +11,6 @@
 /// <reference path="../polymer/types/polymer.d.ts" />
 /// <reference path="../iron-behaviors/iron-control-state.d.ts" />
 /// <reference path="../iron-overlay-behavior/iron-overlay-behavior.d.ts" />
-/// <reference path="../neon-animation/neon-animation-runner-behavior.d.ts" />
 /// <reference path="iron-dropdown-scroll-manager.d.ts" />
 
 /**
@@ -37,7 +36,7 @@
  * hidden until the dropdown element has `opened` set to true, or when the `open`
  * method is called on the element.
  */
-interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState, Polymer.IronA11yKeysBehavior, Polymer.IronOverlayBehavior, Polymer.NeonAnimationRunnerBehavior {
+interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState, Polymer.IronA11yKeysBehavior, Polymer.IronOverlayBehavior {
 
   /**
    * The orientation against which to align the dropdown content
@@ -52,22 +51,8 @@ interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState,
    * Overridden from `Polymer.IronFitBehavior`.
    */
   verticalAlign: string|null|undefined;
-
-  /**
-   * An animation config. If provided, this will be used to animate the
-   * opening of the dropdown. Pass an Array for multiple animations.
-   * See `neon-animation` documentation for more animation configuration
-   * details.
-   */
-  openAnimationConfig: object|null|undefined;
-
-  /**
-   * An animation config. If provided, this will be used to animate the
-   * closing of the dropdown. Pass an Array for multiple animations.
-   * See `neon-animation` documentation for more animation configuration
-   * details.
-   */
-  closeAnimationConfig: object|null|undefined;
+  entryAnimation: string|null|undefined;
+  exitAnimation: string|null|undefined;
 
   /**
    * If provided, this will be the element that will be focused when
@@ -99,53 +84,8 @@ interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState,
   ready(): void;
   attached(): void;
   detached(): void;
-
-  /**
-   * Called when the value of `opened` changes.
-   * Overridden from `IronOverlayBehavior`
-   */
-  _openedChanged(): void;
-
-  /**
-   * Overridden from `IronOverlayBehavior`.
-   */
-  _renderOpened(): void;
-
-  /**
-   * Overridden from `IronOverlayBehavior`.
-   */
-  _renderClosed(): void;
-
-  /**
-   * Apply focus to focusTarget or containedElement
-   */
-  _applyFocus(): void;
-
-  /**
-   * Called when animation finishes on the dropdown (when opening or
-   * closing). Responsible for "completing" the process of opening or
-   * closing the dropdown by positioning it or setting its display to
-   * none.
-   */
-  _onNeonAnimationFinish(): void;
-
-  /**
-   * Constructs the final animation config from different properties used
-   * to configure specific parts of the opening and closing animations.
-   */
-  _updateAnimationConfig(): void;
-
-  /**
-   * Updates the overlay position based on configured horizontal
-   * and vertical alignment.
-   */
-  _updateOverlayPosition(): void;
-
-  /**
-   * Sets scrollAction according to the value of allowOutsideScroll.
-   * Prefer setting directly scrollAction.
-   */
-  _allowOutsideScrollChanged(allowOutsideScroll: any): void;
+  cancelAnimation(): void;
+  playAnimation(animation?: string): void;
 }
 
 interface HTMLElementTagNameMap {

From b6956255ba5892e5cd48a5788cac9b7603275174 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 28 Mar 2018 16:56:40 -0700
Subject: [PATCH 05/15] keep properties for backwards-compat, update docs

---
 README.md          | 104 ++++++++++++++++++++++++++++++---------------
 iron-dropdown.d.ts |  57 +++++++++++++++++++++++++
 iron-dropdown.html |  68 +++++++++++++++++++++++++++++
 3 files changed, 194 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 06c02cc..b7c5a7a 100644
--- a/README.md
+++ b/README.md
@@ -1,35 +1,69 @@
-[![Build status](https://travis-ci.org/PolymerElements/iron-dropdown.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-dropdown)
-
-_[Demo and API docs](https://elements.polymer-project.org/elements/iron-dropdown)_
-
-
-## &lt;iron-dropdown&gt;
-
-`<iron-dropdown>` is a generalized element that is useful when you have
-hidden content (`dropdown-content`) that is revealed due to some change in
-state that should cause it to do so.
-
-Note that this is a low-level element intended to be used as part of other
-composite elements that cause dropdowns to be revealed.
-
-Examples of elements that might be implemented using an `iron-dropdown`
-include comboboxes, menubuttons, selects. The list goes on.
-
-The `<iron-dropdown>` element exposes attributes that allow the position
-of the `dropdown-content` relative to the `dropdown-trigger` to be
-configured.
-
-```html
-<iron-dropdown horizontal-align="right" vertical-align="top">
-  <div slot="dropdown-content">Hello!</div>
-</iron-dropdown>
-```
-
-In the above example, the `<div>` assigned to the `dropdown-content` slot will be
-hidden until the dropdown element has `opened` set to true, or when the `open`
-method is called on the element.
-
-### Changes in 2.0
-- Removed the private property `_focusTarget` which was deprecated.
-- `neon-animation 2.0` doesn't import the Web Animations polyfill, so you'll have to import it ([see example](demo/index.html))
-- Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`
+[![Build status](https://travis-ci.org/PolymerElements/iron-dropdown.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-dropdown)
+
+_[Demo and API docs](https://elements.polymer-project.org/elements/iron-dropdown)_
+
+
+## &lt;iron-dropdown&gt;
+
+`<iron-dropdown>` is a generalized element that is useful when you have
+hidden content (`dropdown-content`) that is revealed due to some change in
+state that should cause it to do so.
+
+Note that this is a low-level element intended to be used as part of other
+composite elements that cause dropdowns to be revealed.
+
+Examples of elements that might be implemented using an `iron-dropdown`
+include comboboxes, menubuttons, selects. The list goes on.
+
+The `<iron-dropdown>` element exposes attributes that allow the position
+of the `dropdown-content` relative to the `dropdown-trigger` to be
+configured.
+
+```html
+<iron-dropdown horizontal-align="right" vertical-align="top">
+  <div slot="dropdown-content">Hello!</div>
+</iron-dropdown>
+```
+
+In the above example, the `<div>` assigned to the `dropdown-content` slot will be
+hidden until the dropdown element has `opened` set to true, or when the `open`
+method is called on the element.
+
+### Changes in 2.0
+- Removed the private property `_focusTarget` which was deprecated.
+- Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`.
+- `<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+
+### Animations
+
+`<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+This change reduces code size, and uses the platform. You can implement custom entry/exit animations using CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
+
+    <style>
+      @keyframes appear-from-below-animation {
+        from {
+          transform: translateY(100px);
+          opacity: 0;
+        }
+      }
+
+      .appear-from-below-animation {
+        animation-name: appear-from-below-animation;
+        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+        animation-duration: 200ms;
+      }
+
+      @keyframes fade-out-animation {
+        to { opacity: 0 }
+      }
+
+      .fade-out-animation {
+        animation-name: fade-out-animation;
+        animation-duration: 100ms;
+      }
+    </style>
+
+    <iron-dropdown entry-animation="appear-from-below-animation"
+                   exit-animation="fade-out-animation">
+      <div slot="dropdown-content">Hello!</div>
+    </iron-dropdown>
diff --git a/iron-dropdown.d.ts b/iron-dropdown.d.ts
index 5c25c5b..5de619c 100644
--- a/iron-dropdown.d.ts
+++ b/iron-dropdown.d.ts
@@ -35,6 +35,45 @@
  * In the above example, the `<div>` assigned to the `dropdown-content` slot will be
  * hidden until the dropdown element has `opened` set to true, or when the `open`
  * method is called on the element.
+ *
+ * ### Changes in 2.0
+ * - Removed the private property `_focusTarget` which was deprecated.
+ * - Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`.
+ * - `<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations
+ *
+ * ### Animations
+ *
+ * `<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+ * This change reduces code size, and uses the platform. You can implement custom entry/exit animations using CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
+ *
+ *     <style>
+ *       \@keyframes appear-from-below-animation {
+ *         from {
+ *           transform: translateY(100px);
+ *           opacity: 0;
+ *         }
+ *       }
+ *
+ *       .appear-from-below-animation {
+ *         animation-name: appear-from-below-animation;
+ *         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+ *         animation-duration: 200ms;
+ *       }
+ *
+ *       \@keyframes fade-out-animation {
+ *         to { opacity: 0 }
+ *       }
+ *
+ *       .fade-out-animation {
+ *         animation-name: fade-out-animation;
+ *         animation-duration: 100ms;
+ *       }
+ *     </style>
+ *
+ *     <iron-dropdown entry-animation="appear-from-below-animation"
+ *                    exit-animation="fade-out-animation">
+ *       <div slot="dropdown-content">Hello!</div>
+ *     </iron-dropdown>
  */
 interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState, Polymer.IronA11yKeysBehavior, Polymer.IronOverlayBehavior {
 
@@ -51,7 +90,25 @@ interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState,
    * Overridden from `Polymer.IronFitBehavior`.
    */
   verticalAlign: string|null|undefined;
+
+  /**
+   * This property is deprecated and will be ignored, use `entryAnimation` instead.
+   */
+  openAnimationConfig: object|null|undefined;
+
+  /**
+   * This property is deprecated and will be ignored, use `exitAnimation` instead.
+   */
+  closeAnimationConfig: object|null|undefined;
+
+  /**
+   * The class defining the entry animation.
+   */
   entryAnimation: string|null|undefined;
+
+  /**
+   * The class defining the exit animation.
+   */
   exitAnimation: string|null|undefined;
 
   /**
diff --git a/iron-dropdown.html b/iron-dropdown.html
index 6ea8831..a3c3243 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -37,6 +37,45 @@
 hidden until the dropdown element has `opened` set to true, or when the `open`
 method is called on the element.
 
+### Changes in 2.0
+- Removed the private property `_focusTarget` which was deprecated.
+- Distribution moved from the `class="dropdown-content"` to `slot="dropdown-content"`.
+- `<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations
+
+### Animations
+
+`<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+This change reduces code size, and uses the platform. You can implement custom entry/exit animations using CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
+
+    <style>
+      \@keyframes appear-from-below-animation {
+        from {
+          transform: translateY(100px);
+          opacity: 0;
+        }
+      }
+
+      .appear-from-below-animation {
+        animation-name: appear-from-below-animation;
+        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+        animation-duration: 200ms;
+      }
+
+      \@keyframes fade-out-animation {
+        to { opacity: 0 }
+      }
+
+      .fade-out-animation {
+        animation-name: fade-out-animation;
+        animation-duration: 100ms;
+      }
+    </style>
+
+    <iron-dropdown entry-animation="appear-from-below-animation"
+                   exit-animation="fade-out-animation">
+      <div slot="dropdown-content">Hello!</div>
+    </iron-dropdown>
+
 @demo demo/index.html
 -->
 
@@ -115,10 +154,32 @@
             reflectToAttribute: true
           },
 
+          /**
+           * This property is deprecated and will be ignored, use `entryAnimation` instead.
+           * @deprecated
+           */
+          openAnimationConfig: {
+            type: Object,
+          },
+
+          /**
+           * This property is deprecated and will be ignored, use `exitAnimation` instead.
+           * @deprecated
+           */
+          closeAnimationConfig: {
+            type: Object,
+          },
+
+          /**
+           * The class defining the entry animation.
+           */
           entryAnimation: {
             type: String
           },
 
+          /**
+           * The class defining the exit animation.
+           */
           exitAnimation: {
             type: String
           },
@@ -226,6 +287,11 @@
             this.cancel();
           } else {
             this.cancelAnimation();
+            // Keep this for backwards-compat.
+            this.animationConfig = {
+              open: this.openAnimationConfig,
+              close: this.closeAnimationConfig
+            };
             Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
           }
         },
@@ -259,6 +325,8 @@
             return;
           }
           this.classList.remove('animating');
+          // Fire event for backwards-compat.
+          this.fire('neon-animation-finish', null, {bubbles: false});
           if (this.opened) {
             this.classList.remove(this.entryAnimation);
             this._finishRenderOpened();

From ccd72e4bd2276ec5be15597efb139a4fda80fa93 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 28 Mar 2018 17:28:16 -0700
Subject: [PATCH 06/15] avoid firing neon-animation-finish when no-animations

---
 iron-dropdown.d.ts |  2 --
 iron-dropdown.html | 88 +++++++++++++++++++++++++---------------------
 2 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/iron-dropdown.d.ts b/iron-dropdown.d.ts
index 5de619c..11c1cf2 100644
--- a/iron-dropdown.d.ts
+++ b/iron-dropdown.d.ts
@@ -141,8 +141,6 @@ interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState,
   ready(): void;
   attached(): void;
   detached(): void;
-  cancelAnimation(): void;
-  playAnimation(animation?: string): void;
 }
 
 interface HTMLElementTagNameMap {
diff --git a/iron-dropdown.html b/iron-dropdown.html
index a3c3243..e2fe8ec 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -159,7 +159,7 @@
            * @deprecated
            */
           openAnimationConfig: {
-            type: Object,
+            type: Object
           },
 
           /**
@@ -167,7 +167,7 @@
            * @deprecated
            */
           closeAnimationConfig: {
-            type: Object,
+            type: Object
           },
 
           /**
@@ -252,29 +252,7 @@
         },
 
         detached: function() {
-          this.cancelAnimation();
-        },
-
-        cancelAnimation: function() {
-          this.classList.remove(this.entryAnimation);
-          this.classList.remove(this.exitAnimation);
-          this.classList.remove('animating');
-        },
-
-        /**
-         * @param {string=} animation
-         */
-        playAnimation: function(animation) {
-          if (!this.noAnimations && animation) {
-            this.classList.add('animating');
-            this.classList.add(animation);
-            if (this._willAnimate() === false) {
-              console.info(animation + ' animation was not played');
-              this._onAnimationEnd();
-            }
-          } else {
-            this._onAnimationEnd();
-          }
+          this._cancelAnimation();
         },
 
         /**
@@ -286,7 +264,7 @@
           if (this.opened && this.disabled) {
             this.cancel();
           } else {
-            this.cancelAnimation();
+            this._cancelAnimation();
             // Keep this for backwards-compat.
             this.animationConfig = {
               open: this.openAnimationConfig,
@@ -301,7 +279,11 @@
          * @private
          */
         _renderOpened: function() {
-          this.playAnimation(this.entryAnimation);
+          if (!this.noAnimations && this.entryAnimation) {
+            this._playAnimation(this.entryAnimation);
+          } else {
+            Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
+          }
         },
 
         /**
@@ -309,7 +291,43 @@
          * @private
          */
         _renderClosed: function() {
-          this.playAnimation(this.exitAnimation);
+          if (!this.noAnimations && this.exitAnimation) {
+            this._playAnimation(this.exitAnimation);
+          } else {
+            Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
+          }
+        },
+
+        /**
+         * @private
+         */
+        _cancelAnimation: function() {
+          this.classList.remove(this.entryAnimation);
+          this.classList.remove(this.exitAnimation);
+          this.classList.remove('animating');
+        },
+
+        /**
+         * @param {!string} animation
+         * @private
+         */
+        _playAnimation: function(animation) {
+          this.classList.add('animating');
+          this.classList.add(animation);
+          if (this._willAnimate() === false) {
+            console.info(animation + ' animation was not played');
+            this._onAnimationEnd();
+          }
+        },
+
+        /**
+         * @private
+         */
+        _willAnimate: function() {
+          // If CSS Class does not have animation-name considered not be an animation
+          var style = getComputedStyle(this);
+          return (style.getPropertyValue('animation-name') !== 'none' &&
+            style.getPropertyValue('animation-duration') !== '0ms');
         },
 
         /**
@@ -324,9 +342,9 @@
           if (event && event.target !== this) {
             return;
           }
-          this.classList.remove('animating');
           // Fire event for backwards-compat.
           this.fire('neon-animation-finish', null, {bubbles: false});
+          this.classList.remove('animating');
           if (this.opened) {
             this.classList.remove(this.entryAnimation);
             this._finishRenderOpened();
@@ -380,18 +398,8 @@
           } else {
             Polymer.IronOverlayBehaviorImpl._applyFocus.apply(this, arguments);
           }
-        },
-
-        /**
-         * @private
-         */
-        _willAnimate: function() {
-          // If CSS Class does not have animation-name considered not be an animation
-          var style = getComputedStyle(this);
-          return (style.getPropertyValue('animation-name') !== 'none' &&
-            style.getPropertyValue('animation-duration') !== '0ms');
         }
       });
     })();
   </script>
-</dom-module>
\ No newline at end of file
+</dom-module>

From 34046745fe60df1217c9b9848feef571b3edd17e Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 28 Mar 2018 17:46:09 -0700
Subject: [PATCH 07/15] simplify demo

---
 demo/grow-height-animation.html | 130 --------------------------------
 demo/index.html                 |   6 +-
 demo/x-select.html              |  42 +++++++----
 3 files changed, 29 insertions(+), 149 deletions(-)
 delete mode 100644 demo/grow-height-animation.html

diff --git a/demo/grow-height-animation.html b/demo/grow-height-animation.html
deleted file mode 100644
index a710043..0000000
--- a/demo/grow-height-animation.html
+++ /dev/null
@@ -1,130 +0,0 @@
-<!--
-@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">
-<dom-module id="grow-height-animations">
-  <template>
-    <style>
-      .fade-out-animation {
-        animation-name: fade-out-animation;
-      }
-
-      @keyframes fade-out-animation {
-        to {
-          opacity: 0;
-        }
-      }
-
-      .expand-animation,
-      .expand-animation > * {
-        overflow: hidden;
-        contain: content;
-        will-change: opacity, transform;
-        animation-fill-mode: both;
-        animation-timing-function: step-end;
-      }
-
-      .expand-animation {
-        animation-name: expand-animation-200ms;
-      }
-
-      .expand-animation > * {
-        animation-name: expand-animation-200ms-inverse;
-      }
-
-      /**
-        * Generated with https://valdrinkoshi.github.io/animation-keyframes/#animationName=expand-animation-200ms&duration=200&fps=60&presetIndex=6&easeCallbackIndex=4&fromScaleX=1&fromScaleY=0.5&toScaleX=1&toScaleY=1&customizedStyles=transform-origin:%20left%20top;%0A%20animation-fill-mode:%20both;%0A%20animation-delay:%20150ms;
-        * Manually added opacity animation from 0 at 0% to 1 at 25%
-      */
-
-      @keyframes expand-animation-200ms {
-        0% {
-          transform: scaleY(0.5);
-          opacity: 0;
-        }
-        9.09091% {
-          transform: scaleY(0.57328);
-          opacity: 0.25;
-        }
-        18.18182% {
-          transform: scaleY(0.64116);
-          opacity: 0.5;
-        }
-        27.27273% {
-          transform: scaleY(0.70448);
-          opacity: 1;
-        }
-        36.36364% {
-          transform: scaleY(0.76325);
-        }
-        45.45455% {
-          transform: scaleY(0.81724);
-        }
-        54.54545% {
-          transform: scaleY(0.86603);
-        }
-        63.63636% {
-          transform: scaleY(0.90902);
-        }
-        72.72727% {
-          transform: scaleY(0.94535);
-        }
-        81.81818% {
-          transform: scaleY(0.97387);
-        }
-        90.90909% {
-          transform: scaleY(0.9929);
-        }
-        100% {
-          transform: scaleY(1);
-        }
-      }
-
-      @keyframes expand-animation-200ms-inverse {
-        0% {
-          transform: scaleY(2);
-        }
-        9.09091% {
-          transform: scaleY(1.74435);
-        }
-        18.18182% {
-          transform: scaleY(1.55967);
-        }
-        27.27273% {
-          transform: scaleY(1.41949);
-        }
-        36.36364% {
-          transform: scaleY(1.31019);
-        }
-        45.45455% {
-          transform: scaleY(1.22363);
-        }
-        54.54545% {
-          transform: scaleY(1.15469);
-        }
-        63.63636% {
-          transform: scaleY(1.10009);
-        }
-        72.72727% {
-          transform: scaleY(1.05781);
-        }
-        81.81818% {
-          transform: scaleY(1.02683);
-        }
-        90.90909% {
-          transform: scaleY(1.00715);
-        }
-        100% {
-          transform: scaleY(1);
-        }
-      }
-    </style>
-  </template>
-</dom-module>
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 69da35d..bc3118b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -29,15 +29,11 @@
       }
     }
 
-    html {
-      --iron-dropdown-box-shadow: 0px 2px 6px #ccc;
-      /* --iron-dropdown-border: 1px solid; */
-    }
-
     [slot="dropdown-content"] {
       background-color: white;
       line-height: 20px;
       border-radius: 3px;
+      box-shadow: 0px 2px 6px #ccc;
     }
 
     .random-content {
diff --git a/demo/x-select.html b/demo/x-select.html
index 6a6fbeb..44a88db 100644
--- a/demo/x-select.html
+++ b/demo/x-select.html
@@ -9,28 +9,44 @@
 -->
 
 <link rel="import" href="../iron-dropdown.html">
-<link rel="import" href="grow-height-animation.html">
 
 <dom-module id="x-select">
   <template>
-    <style include="grow-height-animations">
+    <style>
       :host {
         display: inline-block;
         margin: 1em;
       }
 
-      /* ShadyCSS has some scoping issues, see https://github.com/webcomponents/shadycss/issues/168 */
+      @keyframes expand-animation {
+        from {
+          max-height: 50px;
+          opacity: 0;
+        }
+        to {
+          max-height: 100vh;
+          opacity: 1;
+        }
+      }
 
-      iron-dropdown,
-      iron-dropdown > * {
-        box-shadow: var(--iron-dropdown-box-shadow, none);
-        border: var(--iron-dropdown-border, none);
+      .expand-animation {
+        overflow: hidden;
+        animation-name: expand-animation;
+        animation-fill-mode: both;
+        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+        animation-delay: 150ms;
         animation-duration: 200ms;
       }
 
-      .expand-animation,
-      .expand-animation > * {
-        animation-delay: 150ms;
+      @keyframes fade-out-animation {
+        to {
+          opacity: 0
+        }
+      }
+
+      .fade-out-animation {
+        animation-name: fade-out-animation;
+        animation-duration: 150ms;
       }
     </style>
     <div on-tap="open">
@@ -43,9 +59,7 @@
       scroll-action="[[scrollAction]]"
       entry-animation="expand-animation"
       exit-animation="fade-out-animation">
-      <div slot="dropdown-content">
-        <slot name="dropdown-content"></slot>
-      </div>
+      <slot name="dropdown-content" slot="dropdown-content"></slot>
     </iron-dropdown>
   </template>
   <script>
@@ -64,4 +78,4 @@
       }
     });
   </script>
-</dom-module>
\ No newline at end of file
+</dom-module>

From 0c1492ddeb5bed0da775e239b2b619a4ec051492 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Wed, 28 Mar 2018 17:55:34 -0700
Subject: [PATCH 08/15] fix test duration

---
 test/iron-dropdown.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/iron-dropdown.html b/test/iron-dropdown.html
index 9187fce..85b30ba 100644
--- a/test/iron-dropdown.html
+++ b/test/iron-dropdown.html
@@ -54,7 +54,7 @@
   }
 
   .fade-in-animation {
-    animation: fade-in-animation 100ms;
+    animation: fade-in-animation 300ms;
   }
 
   @keyframes fade-in-animation {

From 1313b7d12eb44d60b592b6750e7749dbd3c01558 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Thu, 29 Mar 2018 22:35:23 -0700
Subject: [PATCH 09/15] include default animations, remove neon-animation props

---
 README.md          |  35 ++++++------
 demo/x-select.html |  10 ----
 iron-dropdown.d.ts |  45 +++++++---------
 iron-dropdown.html | 130 ++++++++++++++++++++++++---------------------
 4 files changed, 108 insertions(+), 112 deletions(-)

diff --git a/README.md b/README.md
index b7c5a7a..eea332b 100644
--- a/README.md
+++ b/README.md
@@ -36,34 +36,37 @@ method is called on the element.
 
 ### Animations
 
-`<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
-This change reduces code size, and uses the platform. You can implement custom entry/exit animations using CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
+Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
+is opened or closed. Included in the component are:
+- fade-in-animation
+- fade-out-animation
+- scale-up-animation
+- scale-down-animation
+
+These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
+CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
 
     <style>
-      @keyframes appear-from-below-animation {
+      @keyframes expand-animation {
         from {
-          transform: translateY(100px);
+          max-height: 10px;
           opacity: 0;
         }
+        to {
+          max-height: 100px;
+        }
       }
 
-      .appear-from-below-animation {
-        animation-name: appear-from-below-animation;
+      .expand-animation {
+        animation-name: expand-animation;
         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+        animation-delay: 150ms;
         animation-duration: 200ms;
       }
-
-      @keyframes fade-out-animation {
-        to { opacity: 0 }
-      }
-
-      .fade-out-animation {
-        animation-name: fade-out-animation;
-        animation-duration: 100ms;
-      }
     </style>
 
-    <iron-dropdown entry-animation="appear-from-below-animation"
+    <iron-dropdown entry-animation="expand-animation"
                    exit-animation="fade-out-animation">
       <div slot="dropdown-content">Hello!</div>
     </iron-dropdown>
diff --git a/demo/x-select.html b/demo/x-select.html
index 44a88db..b63565d 100644
--- a/demo/x-select.html
+++ b/demo/x-select.html
@@ -25,27 +25,17 @@
         }
         to {
           max-height: 100vh;
-          opacity: 1;
         }
       }
 
       .expand-animation {
-        overflow: hidden;
         animation-name: expand-animation;
-        animation-fill-mode: both;
         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
         animation-delay: 150ms;
         animation-duration: 200ms;
       }
 
-      @keyframes fade-out-animation {
-        to {
-          opacity: 0
-        }
-      }
-
       .fade-out-animation {
-        animation-name: fade-out-animation;
         animation-duration: 150ms;
       }
     </style>
diff --git a/iron-dropdown.d.ts b/iron-dropdown.d.ts
index 11c1cf2..afecce0 100644
--- a/iron-dropdown.d.ts
+++ b/iron-dropdown.d.ts
@@ -43,34 +43,37 @@
  *
  * ### Animations
  *
- * `<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
- * This change reduces code size, and uses the platform. You can implement custom entry/exit animations using CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
+ * Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
+ * is opened or closed. Included in the component are:
+ * - fade-in-animation
+ * - fade-out-animation
+ * - scale-up-animation
+ * - scale-down-animation
+ *
+ * These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+ * This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
+ * CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
  *
  *     <style>
- *       \@keyframes appear-from-below-animation {
+ *       \@keyframes expand-animation {
  *         from {
- *           transform: translateY(100px);
+ *           max-height: 10px;
  *           opacity: 0;
  *         }
+ *         to {
+ *           max-height: 100px;
+ *         }
  *       }
  *
- *       .appear-from-below-animation {
- *         animation-name: appear-from-below-animation;
+ *       .expand-animation {
+ *         animation-name: expand-animation;
  *         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+ *         animation-delay: 150ms;
  *         animation-duration: 200ms;
  *       }
- *
- *       \@keyframes fade-out-animation {
- *         to { opacity: 0 }
- *       }
- *
- *       .fade-out-animation {
- *         animation-name: fade-out-animation;
- *         animation-duration: 100ms;
- *       }
  *     </style>
  *
- *     <iron-dropdown entry-animation="appear-from-below-animation"
+ *     <iron-dropdown entry-animation="expand-animation"
  *                    exit-animation="fade-out-animation">
  *       <div slot="dropdown-content">Hello!</div>
  *     </iron-dropdown>
@@ -91,16 +94,6 @@ interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState,
    */
   verticalAlign: string|null|undefined;
 
-  /**
-   * This property is deprecated and will be ignored, use `entryAnimation` instead.
-   */
-  openAnimationConfig: object|null|undefined;
-
-  /**
-   * This property is deprecated and will be ignored, use `exitAnimation` instead.
-   */
-  closeAnimationConfig: object|null|undefined;
-
   /**
    * The class defining the entry animation.
    */
diff --git a/iron-dropdown.html b/iron-dropdown.html
index e2fe8ec..915d7d9 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -44,34 +44,37 @@
 
 ### Animations
 
-`<iron-dropdown>` animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
-This change reduces code size, and uses the platform. You can implement custom entry/exit animations using CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
+Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
+is opened or closed. Included in the component are:
+- fade-in-animation
+- fade-out-animation
+- scale-up-animation
+- scale-down-animation
+
+These animations are not based on the deprecated `neon-animation` component, and use CSS keyframe animations.
+This change reduces code size, and uses the platform. You can implement custom entry/exit animations using
+CSS keyframe animations; define the animation keyframes, a CSS class for the animation, and assign the class to the `entry/exit-animation`, e.g.
 
     <style>
-      \@keyframes appear-from-below-animation {
+      \@keyframes expand-animation {
         from {
-          transform: translateY(100px);
+          max-height: 10px;
           opacity: 0;
         }
+        to {
+          max-height: 100px;
+        }
       }
 
-      .appear-from-below-animation {
-        animation-name: appear-from-below-animation;
+      .expand-animation {
+        animation-name: expand-animation;
         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+        animation-delay: 150ms;
         animation-duration: 200ms;
       }
-
-      \@keyframes fade-out-animation {
-        to { opacity: 0 }
-      }
-
-      .fade-out-animation {
-        animation-name: fade-out-animation;
-        animation-duration: 100ms;
-      }
     </style>
 
-    <iron-dropdown entry-animation="appear-from-below-animation"
+    <iron-dropdown entry-animation="expand-animation"
                    exit-animation="fade-out-animation">
       <div slot="dropdown-content">Hello!</div>
     </iron-dropdown>
@@ -84,35 +87,70 @@
     <style>
       :host {
         position: fixed;
+        transform-origin: left top;
+      }
+
+      :host([horizontal-align="right"]) {
+        transform-origin: right top;
+      }
+
+      :host([vertical-align="bottom"]) {
+        transform-origin: left bottom;
+      }
+
+      :host([horizontal-align="right"][vertical-align="bottom"]) {
+        transform-origin: right bottom;
       }
 
       ::slotted(*) {
         overflow: auto;
       }
 
-      :host(.animating) ::slotted(*) {
-        overflow: hidden;
+      :host(.animating) {
         pointer-events: none;
+        animation-duration: 500ms;
+        animation-fill-mode: both;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       }
 
-      :host,
-      ::slotted(*) {
-        transform-origin: left top;
+      :host(.fade-in-animation) {
+        animation-name: fade-in-animation;
       }
 
-      :host([horizontal-align="right"]),
-      :host([horizontal-align="right"]) ::slotted(*) {
-        transform-origin: right top;
+      @keyframes fade-in-animation {
+        from {
+          opacity: 0;
+        }
       }
 
-      :host([vertical-align="bottom"]),
-      :host([vertical-align="bottom"]) ::slotted(*) {
-        transform-origin: left bottom;
+      :host(.fade-out-animation) {
+        animation-name: fade-out-animation;
       }
 
-      :host([horizontal-align="right"][vertical-align="bottom"]),
-      :host([horizontal-align="right"][vertical-align="bottom"]) ::slotted(*) {
-        transform-origin: right bottom;
+      @keyframes fade-out-animation {
+        to {
+          opacity: 0;
+        }
+      }
+
+      :host(.scale-up-animation) {
+        animation-name: scale-up-animation;
+      }
+
+      @keyframes scale-up-animation {
+        from {
+          transform: scale(0);
+        }
+      }
+
+      :host(.scale-down-animation) {
+        animation-name: scale-down-animation;
+      }
+
+      @keyframes scale-down-animation {
+        to {
+          transform: scale(0);
+        }
       }
     </style>
     <slot id="content" name="dropdown-content"></slot>
@@ -154,22 +192,6 @@
             reflectToAttribute: true
           },
 
-          /**
-           * This property is deprecated and will be ignored, use `entryAnimation` instead.
-           * @deprecated
-           */
-          openAnimationConfig: {
-            type: Object
-          },
-
-          /**
-           * This property is deprecated and will be ignored, use `exitAnimation` instead.
-           * @deprecated
-           */
-          closeAnimationConfig: {
-            type: Object
-          },
-
           /**
            * The class defining the entry animation.
            */
@@ -265,11 +287,6 @@
             this.cancel();
           } else {
             this._cancelAnimation();
-            // Keep this for backwards-compat.
-            this.animationConfig = {
-              open: this.openAnimationConfig,
-              close: this.closeAnimationConfig
-            };
             Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
           }
         },
@@ -342,18 +359,11 @@
           if (event && event.target !== this) {
             return;
           }
-          // Fire event for backwards-compat.
-          this.fire('neon-animation-finish', null, {bubbles: false});
-          this.classList.remove('animating');
+          // Removes the classes.
+          this._cancelAnimation();
           if (this.opened) {
-            this.classList.remove(this.entryAnimation);
             this._finishRenderOpened();
           } else {
-            // Ensure to update display before removing the 
-            // animation class, so that user doesn't see flickering
-            // e.g. dialog returning to its initial position/opacity.
-            this.style.display = 'none';
-            this.classList.remove(this.exitAnimation);
             this._finishRenderClosed();
           }
         },

From 2d533a14c54a18dfd30bd308d849c66fad8cf74e Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Thu, 29 Mar 2018 23:26:45 -0700
Subject: [PATCH 10/15] set only entryAnimation

---
 test/iron-dropdown.html | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/test/iron-dropdown.html b/test/iron-dropdown.html
index 85b30ba..0147270 100644
--- a/test/iron-dropdown.html
+++ b/test/iron-dropdown.html
@@ -52,16 +52,6 @@
     width: 3000px;
     height: 3000px;
   }
-
-  .fade-in-animation {
-    animation: fade-in-animation 300ms;
-  }
-
-  @keyframes fade-in-animation {
-    from {
-      opacity: 0;
-    }
-  }
 </style>
 
 <body>

From af91527ee0b816d5890e1b450626c38575980405 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Thu, 29 Mar 2018 23:27:34 -0700
Subject: [PATCH 11/15] [skip ci] update comment

---
 test/iron-dropdown.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/iron-dropdown.html b/test/iron-dropdown.html
index 0147270..55d4666 100644
--- a/test/iron-dropdown.html
+++ b/test/iron-dropdown.html
@@ -251,7 +251,7 @@
 
         suite('correct animationConfig setup', function() {
           setup(function() {
-            // not supported anymore, maybe?
+            // not supported anymore.
             this.skip();
           });
           

From 03fd905f3119679c9f5aca5e020cbea97fea692f Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 16:26:03 -0700
Subject: [PATCH 12/15] warn about animationConfig usages

---
 iron-dropdown.d.ts | 21 ++++++++++++++++++++
 iron-dropdown.html | 49 +++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/iron-dropdown.d.ts b/iron-dropdown.d.ts
index afecce0..039a3b1 100644
--- a/iron-dropdown.d.ts
+++ b/iron-dropdown.d.ts
@@ -104,6 +104,27 @@ interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState,
    */
   exitAnimation: string|null|undefined;
 
+  /**
+   * Deprecated, use `entryAnimation` and `exitAnimation` instead.
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+   * here to not break bindings. Setting it won't have effects on the animation.
+   */
+  animationConfig: object|null|undefined;
+
+  /**
+   * Deprecated, use `entryAnimation` instead.
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+   * here to not break bindings. Setting it won't have effects on the animation.
+   */
+  openAnimationConfig: object|null|undefined;
+
+  /**
+   * Deprecated, use `exitAnimation` instead.
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+   * here to not break bindings. Setting it won't have effects on the animation.
+   */
+  closeAnimationConfig: object|null|undefined;
+
   /**
    * If provided, this will be the element that will be focused when
    * the dropdown opens.
diff --git a/iron-dropdown.html b/iron-dropdown.html
index 915d7d9..6fbe467 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -206,6 +206,36 @@
             type: String
           },
 
+          /**
+           * Deprecated, use `entryAnimation` and `exitAnimation` instead.
+           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+           * here to not break bindings. Setting it won't have effects on the animation.
+           * @deprecated
+           */
+          animationConfig: {
+            type: Object
+          },
+
+          /**
+           * Deprecated, use `entryAnimation` instead.
+           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+           * here to not break bindings. Setting it won't have effects on the animation.
+           * @deprecated
+           */
+          openAnimationConfig: {
+            type: Object
+          },
+
+          /**
+           * Deprecated, use `exitAnimation` instead.
+           * `iron-dropdown` doesn't depend anymore on `neon-animation`, and this property is kept
+           * here to not break bindings. Setting it won't have effects on the animation.
+           * @deprecated
+           */
+          closeAnimationConfig: {
+            type: Object
+          },
+
           /**
            * If provided, this will be the element that will be focused when
            * the dropdown opens.
@@ -264,6 +294,16 @@
           if (!this.scrollAction) {
             this.scrollAction = this.allowOutsideScroll ? 'refit' : 'lock';
           }
+          if (this.openAnimationConfig || this.closeAnimationConfig || this.animationConfig) {
+            console.warn('Configuring animations through animationConfig, openAnimationConfig, '+
+                         'or closeAnimationConfig is no longer supported.' +
+                         'Use entryAnimation and exitAnimation instead.');
+            // Set this for backwards-compat.
+            this.animationConfig = this.animationConfig || {
+              open: this.openAnimationConfig,
+              close: this.closeAnimationConfig
+            };
+          }
           this._readied = true;
         },
 
@@ -319,9 +359,11 @@
          * @private
          */
         _cancelAnimation: function() {
-          this.classList.remove(this.entryAnimation);
-          this.classList.remove(this.exitAnimation);
-          this.classList.remove('animating');
+          if (this._pendingAnimation) {
+            this.classList.remove('animating');
+            this.classList.remove(this._pendingAnimation);
+            this._pendingAnimation = null;
+          }
         },
 
         /**
@@ -331,6 +373,7 @@
         _playAnimation: function(animation) {
           this.classList.add('animating');
           this.classList.add(animation);
+          this._pendingAnimation = animation;
           if (this._willAnimate() === false) {
             console.info(animation + ' animation was not played');
             this._onAnimationEnd();

From dcd1a771df9b3938d4836d6afa7b23a1185d924f Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 16:38:16 -0700
Subject: [PATCH 13/15] implement
 cancelAnimation/playAnimation/getAnimationConfig as no-ops

---
 iron-dropdown.html | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/iron-dropdown.html b/iron-dropdown.html
index 6fbe467..69b43e3 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -317,6 +317,32 @@
           this._cancelAnimation();
         },
 
+        /**
+         * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+         * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+         * now is a no-op.
+         * @deprecated
+         */
+        cancelAnimation: function() {},
+
+        /**
+         * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+         * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+         * now is a no-op.
+         * @param {string=} type
+         * @param {!Object=} cookie
+         * @deprecated
+         */
+        playAnimation: function(type, cookie) {},
+
+        /**
+         * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+         * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+         * now is a no-op.
+         * @deprecated
+         */
+        getAnimationConfig: function(type) { return []; },
+
         /**
          * Called when the value of `opened` changes.
          * Overridden from `IronOverlayBehavior`

From d2a01ce24c339fff80037a96da51d0e241ffdf48 Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 16:40:22 -0700
Subject: [PATCH 14/15] udpdate types

---
 iron-dropdown.d.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/iron-dropdown.d.ts b/iron-dropdown.d.ts
index 039a3b1..2b5b7ef 100644
--- a/iron-dropdown.d.ts
+++ b/iron-dropdown.d.ts
@@ -155,6 +155,27 @@ interface IronDropdownElement extends Polymer.Element, Polymer.IronControlState,
   ready(): void;
   attached(): void;
   detached(): void;
+
+  /**
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+   * now is a no-op.
+   */
+  cancelAnimation(): void;
+
+  /**
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+   * now is a no-op.
+   */
+  playAnimation(type?: string, cookie?: object): void;
+
+  /**
+   * `iron-dropdown` doesn't depend anymore on `neon-animation`.
+   * This method was previously inherited from `Polymer.NeonAnimatableBehavior`,
+   * now is a no-op.
+   */
+  getAnimationConfig(type: any): any;
 }
 
 interface HTMLElementTagNameMap {

From 29681f8045984dab5a8ec1683d86096410fcd29e Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Fri, 30 Mar 2018 18:05:22 -0700
Subject: [PATCH 15/15] [skip ci] format

---
 iron-dropdown.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/iron-dropdown.html b/iron-dropdown.html
index 69b43e3..7249cd6 100644
--- a/iron-dropdown.html
+++ b/iron-dropdown.html
@@ -295,9 +295,9 @@
             this.scrollAction = this.allowOutsideScroll ? 'refit' : 'lock';
           }
           if (this.openAnimationConfig || this.closeAnimationConfig || this.animationConfig) {
-            console.warn('Configuring animations through animationConfig, openAnimationConfig, '+
-                         'or closeAnimationConfig is no longer supported.' +
-                         'Use entryAnimation and exitAnimation instead.');
+            console.warn('Configuring animations through animationConfig, openAnimationConfig, ' +
+              'or closeAnimationConfig is no longer supported. ' +
+              'Use entryAnimation and exitAnimation instead.');
             // Set this for backwards-compat.
             this.animationConfig = this.animationConfig || {
               open: this.openAnimationConfig,