Enable clients to use CSS animations.

paper-dialog.html

@@ -79,6 +79,11 @@ <h2>Header</h2>
 
 (function() {
 
+  var ANIMATION_CSS_CLASSES = {
+    OPENING: 'paper-dialog-opening',
+    CLOSING: 'paper-dialog-closing'
+  };
+
   Polymer({
 
     is: 'paper-dialog',
@@ -93,12 +98,30 @@ <h2>Header</h2>
     },
 
     _renderOpened: function() {
+      this._removeAnimationClasses();
+
+      // Adding the .paper-dialog-opening css class allows clients of
+      // this component to use CSS animations to animate opening the dialog.
+      this.toggleClass(ANIMATION_CSS_CLASSES.OPENING, true);
+
       this.cancelAnimation();
+      if (this.withBackdrop) {
+        this.backdropElement.open();
+      }
       this.playAnimation('entry');
     },
 
     _renderClosed: function() {
+      this._removeAnimationClasses();
+
+      // Adding the .paper-dialog-closing css class allows clients of
+      // this component to use CSS animations to animate closing the dialog.
+      this.toggleClass(ANIMATION_CSS_CLASSES.CLOSING, true);
+
       this.cancelAnimation();
+      if (this.withBackdrop) {
+        this.backdropElement.close();
+      }
       this.playAnimation('exit');
     },
 
@@ -108,6 +131,13 @@ <h2>Header</h2>
       } else {
         this._finishRenderClosed();
       }
+    },
+
+    _removeAnimationClasses: function() {
+      Object.keys(ANIMATION_CSS_CLASSES).forEach(function(key) {
+        var cssClass = ANIMATION_CSS_CLASSES[key];
+        this.toggleClass(cssClass, false);
+      }.bind(this));
     }
 
   });