Remove deprecated neon animation, use CSS keyframe animations

README.md

@@ -1,35 +1,72 @@
-[![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)_
-
-
-## <iron-dropdown>
-
-`<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
+
+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 expand-animation {
+        from {
+          max-height: 10px;
+          opacity: 0;
+        }
+        to {
+          max-height: 100px;
+        }
+      }
+
+      .expand-animation {
+        animation-name: expand-animation;
+        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+        animation-delay: 150ms;
+        animation-duration: 200ms;
+      }
+    </style>
+
+    <iron-dropdown entry-animation="expand-animation"
+                   exit-animation="fade-out-animation">
+      <div slot="dropdown-content">Hello!</div>
+    </iron-dropdown>

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"