update display before removing animation class

paper-dialog.html

@@ -192,7 +192,6 @@ <h2>Header</h2>
     },
 
     cancelAnimation: function() {
-      // Short-cut and cancel all animations and hide
       this.classList.remove(this.entryAnimation);
       this.classList.remove(this.exitAnimation);
     },
@@ -203,34 +202,30 @@ <h2>Header</h2>
         this.classList.add(animation);
         if (this._willAnimate() === false) {
           console.info(animation + ' animation was not played');
-          this.classList.remove(animation);
-          this._finishRender();
+          this._onAnimationEnd();
         }
       } else {
-        this._finishRender();
+        this._onAnimationEnd();
       }
     },
 
     /**
-     * @param {!Event} event
+     * @param {Event=} event
      * @private
      */
     _onAnimationEnd: function(event) {
-      if (event.target !== this) {
+      if (event && event.target !== this) {
         return;
       }
-      // Remove the animation classes.
-      this.cancelAnimation();
-      this._finishRender();
-    },
-
-    /**
-     * @private
-     */
-    _finishRender: function() {
       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();
       }
     },

test/paper-dialog.html

@@ -103,17 +103,17 @@
         dialog.addEventListener('animationend', spy);
         dialog.open();
         dialog.addEventListener('iron-overlay-opened', function() {
-          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          // Wait for `animationend` to propagate up.
           requestAnimationFrame(function() {
             assert.equal(spy.callCount, 0, 'no open animation');
             dialog.close();
-            dialog.addEventListener('iron-overlay-closed', function() {
-              // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
-              requestAnimationFrame(function() {
-                assert.equal(spy.callCount, 0, 'no close animation');
-                done();
-              });
-            });
+          });
+        });
+        dialog.addEventListener('iron-overlay-closed', function() {
+          // Wait for `animationend` to propagate up.
+          requestAnimationFrame(function() {
+            assert.equal(spy.callCount, 0, 'no close animation');
+            done();
           });
         });
       });
@@ -123,14 +123,14 @@
         dialog.addEventListener('animationend', spy);
         dialog.open();
         dialog.addEventListener('iron-overlay-opened', function() {
-          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          // Wait for `animationend` to propagate up.
           requestAnimationFrame(function() {
             assert.equal(spy.callCount, 1, 'open animation ok');
             dialog.close();
           });
         });
         dialog.addEventListener('iron-overlay-closed', function() {
-          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          // Wait for `animationend` to propagate up.
           requestAnimationFrame(function() {
             assert.equal(spy.callCount, 2, 'close animation ok');
             done();
@@ -144,7 +144,7 @@
         dialog.addEventListener('animationend', spy);
         dialog.open();
         dialog.addEventListener('iron-overlay-opened', function() {
-          // Wait a RAF so that  `animationend` can propagate up and be captured by `spy`.
+          // Wait for `animationend` to propagate up.
           requestAnimationFrame(function() {
             assert.equal(spy.callCount, 0, 'open animation ok');
             done();