fix(backdrop): do not dismiss when clicked while animating to show

 - add test to verify behavior

ng2-material/components/backdrop/backdrop.ts

@@ -57,6 +57,7 @@ export class MdBackdrop {
 
 
   private _visible: boolean = false;
+  private _transitioning: boolean = false;
 
   /**
    * Read-only property indicating whether the backdrop is visible or not.
@@ -66,7 +67,7 @@ export class MdBackdrop {
   }
 
   onClick() {
-    if (this.clickClose && this.visible) {
+    if (this.clickClose && !this._transitioning && this.visible) {
       this.hide();
     }
   }
@@ -80,8 +81,10 @@ export class MdBackdrop {
       return Promise.resolve();
     }
     this._visible = true;
+    this._transitioning = true;
     this.onShowing.emit(this);
     return Animate.enter(this.element.nativeElement, 'md-active').then(() => {
+      this._transitioning = false;
       this.onShown.emit(this);
     });
   }
@@ -95,8 +98,10 @@ export class MdBackdrop {
       return Promise.resolve();
     }
     this._visible = false;
+    this._transitioning = true;
     this.onHiding.emit(this);
     return Animate.leave(this.element.nativeElement, 'md-active').then(() => {
+      this._transitioning = false;
       this.onHidden.emit(this);
     });
   }

test/components/backdrop/backdrop_spec.ts

@@ -96,6 +96,24 @@ export function main() {
             async.done();
           });
         }));
+        it('should not be clickable during transition animation', inject([AsyncTestCompleter], (async) => {
+          setup().then((api: IBackdropFixture) => {
+            let triggered = false;
+            api.backdrop.clickClose = true;
+            api.backdrop.hide = () => {
+              triggered = true;
+              return Promise.resolve();
+            };
+            api.backdrop.show().then(() => {
+              expect(triggered).toBe(false);
+              api.debug.nativeElement.click();
+              expect(triggered).toBe(true);
+            });
+            api.debug.nativeElement.click();
+            expect(triggered).toBe(false);
+            async.done();
+          });
+        }));
       });
       describe('show', () => {
         it('emit events before and after being shown', inject([AsyncTestCompleter], (async) => {