Remove deprecated neon animation, use CSS keyframe animations

README.md

@@ -30,7 +30,7 @@ buttons. Focus will be given to the `dialog-confirm` button when the dialog is o
 ### Changes in 2.0
 - `paper-dialog-behavior 2.0` styles only direct `h2` and `.buttons` children of the dialog because of how [`::slotted` works](https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#stylinglightdom) 
 (compound selector will select only top level nodes)
-- `neon-animation 2.0` doesn't import the Web Animations polyfill, so you'll have to import it ([see Animations section](#Animations))
+- `<paper-dialog>` uses CSS animation keyframes instead of `neon-animation`, ([see Animations section](#Animations))
 
 ### Styling
 
@@ -40,17 +40,36 @@ this element.
 ### Animations
 
 Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
-is opened or closed. See the documentation in
-[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
+is opened or closed. Included in the component are:
+- fade-in-animation
+- fade-out-animation
+- scale-up-animation
+- scale-down-animation
 
-For example:
+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.
 
 ```html
-<link rel="import" href="../neon-animation/web-animations.html">
-<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
-<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
-
-<paper-dialog entry-animation="scale-up-animation"
+<style>
+  @keyframes appear-from-top {
+    0% {
+      transform: translateY(-2000px);
+      opacity: 0;
+    }
+    10% {
+      opacity: 0.2;
+    }
+  }
+
+  .appear-from-top {
+    animation-name: appear-from-top;
+    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+    animation-duration: 800ms;
+  }
+</style>
+
+<paper-dialog entry-animation="appear-from-top"
               exit-animation="fade-out-animation">
   <h2>Header</h2>
   <div>Dialog body</div>
@@ -62,4 +81,3 @@ For example:
 See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
 element.
 
-

bower.json

@@ -19,7 +19,6 @@
   "homepage": "https://github.com/PolymerElements/paper-dialog",
   "ignore": [],
   "dependencies": {
-    "neon-animation": "PolymerElements/neon-animation#1 - 2",
     "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#1 - 2",
     "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#1 - 2",
     "polymer": "Polymer/polymer#1.9 - 2"
@@ -33,14 +32,12 @@
     "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#1 - 2",
     "paper-item": "PolymerElements/paper-item#1 - 2",
     "paper-listbox": "PolymerElements/paper-listbox#1 - 2",
-    "web-animations-js": "web-animations/web-animations-js#^2.2.0",
     "web-component-tester": "^6.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   },
   "variants": {
     "1.x": {
       "dependencies": {
-        "neon-animation": "PolymerElements/neon-animation#^1.0.0",
         "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^1.0.0",
         "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#^1.7.0",
         "polymer": "Polymer/polymer#^1.9"
@@ -54,7 +51,6 @@
         "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.0.0",
         "paper-item": "PolymerElements/paper-item#^1.0.0",
         "paper-listbox": "PolymerElements/paper-listbox#^1.0.0",
-        "web-animations-js": "web-animations/web-animations-js#^2.2.0",
         "web-component-tester": "^4.0.0",
         "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
       },