fire neon-animation-finish before display: none

paper-dialog.d.ts

@@ -36,7 +36,7 @@
  *     </paper-dialog>
  *
  * ### 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) 
+ * - `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)
  * - `<paper-dialog>` uses CSS animation keyframes instead of `neon-animation`, ([see Animations section](#Animations))
  *

paper-dialog.html

@@ -35,7 +35,7 @@ <h2>Header</h2>
     </paper-dialog>
 
 ### 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) 
+- `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)
 - `<paper-dialog>` uses CSS animation keyframes instead of `neon-animation`, ([see Animations section](#Animations))
 
@@ -153,20 +153,20 @@ <h2>Header</h2>
   ],
 
   listeners: {
-    'animationend': '_onAnimationEnd'
+    'animationend': '_onAnimationend'
   },
 
   properties: {
     /**
-      * The class defining the entry animation. `<paper-dialog>` ships 
+      * The class defining the entry animation. `<paper-dialog>` ships
       * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
       * but you can use custom animations too. See the Animations section in the README.md.
       */
     entryAnimation: {
       type: String
     },
     /**
-      * The class defining the exit animation. `<paper-dialog>` ships 
+      * The class defining the exit animation. `<paper-dialog>` ships
       * `fade-in-animation, fade-out-animation, scale-up-animation, scale-down-animation`,
       * but you can use custom animations too. See the Animations section in the README.md.
       */
@@ -205,11 +205,10 @@ <h2>Header</h2>
       this.classList.add(animation);
       if (this._willAnimate() === false) {
         console.info(animation + ' animation was not played');
-        this.classList.remove(animation);
-        this._onAnimationFinish();
+        this._onAnimationend();
       }
     } else {
-      this._onAnimationFinish();
+      this._onAnimationend();
     }
   },
 
@@ -224,30 +223,23 @@ <h2>Header</h2>
   },
 
   /**
-    * @param {!Event} event
+    * @param {Event=} event
     * @private
     */
-  _onAnimationEnd: function(event) {
-    if (event.target !== this) {
+  _onAnimationend: function(event) {
+    if (event && event.target !== this) {
       return;
     }
+    // Fire for backwards compat.
+    this.fire('neon-animation-finish');
     if (!this.opened) {
-      // Ensure to update display before removing the 
+      // 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';
     }
     // Removes the classes.
     this.cancelAnimation();
-    // Fire for backwards compat.
-    this.fire('neon-animation-finish');
-    this._onAnimationFinish();
-  },
-
-  /**
-    * @private
-    */
-  _onAnimationFinish: function() {
     if (this.opened) {
       this._finishRenderOpened();
     } else {