fix(panel): invisble after hide/show cycle

When an mdPanel instance is hidden through an animation, the "leave"
animation classes remain on the panel after it was hidden. This causes
it to remain hidden if it is requested to be shown a second time.

We resolve this by ensuring the relevant animation classes are removed
properly when hiding the panel.

Fixes #11291

Author: oliversalzburg

src/components/panel/demoReuse/index.html

@@ -0,0 +1,30 @@
+<div class="md-padding" ng-controller="ReuseDemoCtrl as ctrl">
+  <p>
+    Panels can be reused to avoid re-creating resources.
+  </p>
+
+  <div flex="25">
+    <h3>AnimationType:</h3>
+    <md-radio-group ng-model="ctrl.animationType">
+      <md-radio-button value="slide">Slide</md-radio-button>
+      <md-radio-button value="scale">Scale</md-radio-button>
+      <md-radio-button value="fade">Fade</md-radio-button>
+      <md-radio-button value="custom">Custom</md-radio-button>
+    </md-radio-group>
+  </div>
+
+  <div>
+    <md-button class="md-primary md-raised demo-dialog-reuse-button"
+               ng-click="ctrl.showDialog($event, 'Ahoi')">
+      Open Dialog
+    </md-button>
+    <md-button class="md-accent md-raised demo-dialog-reuse-button"
+               ng-click="ctrl.showDialog($event, 'Hello')">
+      Also open Dialog
+    </md-button>
+    <md-button class="md-warning md-raised demo-dialog-reuse-button"
+               ng-click="ctrl.showDialog($event, 'Greetings')">
+      Open Here
+    </md-button>
+  </div>
+</div>

src/components/panel/demoReuse/panel.tmpl.html

@@ -0,0 +1,21 @@
+<div role="dialog" aria-label="Eat me!" layout="column" layout-align="center center">
+  <md-toolbar>
+    <div class="md-toolbar-tools">
+      <h2>Surprise!</h2>
+    </div>
+  </md-toolbar>
+
+  <div class="demo-dialog-content">
+    <p>{{ctrl.text}}</p>
+
+    <div layout="row" >
+      <img flex alt="Delicious donut" src="img/donut.jpg">
+    </div>
+  </div>
+
+  <div layout="row" class="demo-dialog-button">
+    <md-button md-autofocus flex class="md-primary" ng-click="ctrl.closeDialog()">
+      Close
+    </md-button>
+  </div>
+</div>

src/components/panel/demoReuse/script.js

@@ -0,0 +1,93 @@
+(function() {
+'use strict';
+
+angular.module('panelReuseDemo', ['ngMaterial'])
+    .controller('ReuseDemoCtrl', ReuseDemoCtrl)
+    .controller('ReusePanelCtrl', ReusePanelCtrl);
+
+function ReuseDemoCtrl($mdPanel) {
+  this._mdPanel = $mdPanel;
+
+  this.animationType = 'scale';
+
+  var position = this._mdPanel.newPanelPosition()
+    .absolute()
+    .center();
+
+  var animation = this._mdPanel.newPanelAnimation()
+    .openFrom('.demo-dialog-reuse-button')
+    .duration(300)
+    .withAnimation(this._mdPanel.animation.SCALE);
+
+  var config = {
+    attachTo: angular.element(document.body),
+    controller: ReusePanelCtrl,
+    controllerAs: 'ctrl',
+    disableParentScroll: this.disableParentScroll,
+    templateUrl: 'panel.tmpl.html',
+    hasBackdrop: true,
+    panelClass: 'demo-dialog-example',
+    position: position,
+    animation: animation,
+    trapFocus: true,
+    zIndex: 150,
+    clickOutsideToClose: false,
+    escapeToClose: false,
+    focusOnOpen: true,
+    locals: {
+      _demoCtrl: this
+    }
+  };
+
+  this._mdPanelRef = this._mdPanel.create(config);
+  this._mdPanelRef.attach();
+}
+
+ReuseDemoCtrl.prototype.showDialog = function($event, text) {
+  var position = this._mdPanel.newPanelPosition()
+    .absolute()
+    .center();
+
+  this._mdPanelRef.updatePosition(position);
+
+  var animation = this._mdPanel.newPanelAnimation()
+    .openFrom($event)
+    .duration(300);
+
+  switch (this.animationType) {
+    case 'custom':
+      animation.withAnimation({
+        open: 'demo-dialog-custom-animation-open',
+        close: 'demo-dialog-custom-animation-close'
+      });
+      break;
+    case 'slide':
+      animation.withAnimation(this._mdPanel.animation.SLIDE);
+      break;
+    case 'scale':
+      animation.withAnimation(this._mdPanel.animation.SCALE);
+      break;
+    case 'fade':
+      animation.withAnimation(this._mdPanel.animation.FADE);
+      break;
+  }
+
+  this._mdPanelRef.updateAnimation(animation);
+
+  this._mdPanelRefCtrl.text = text;
+  this._mdPanelRef.show();
+};
+
+
+function ReusePanelCtrl(mdPanelRef, _demoCtrl) {
+  this._mdPanelRef = mdPanelRef;
+
+  // Register the controller for this panel with the parent controller.
+  _demoCtrl._mdPanelRefCtrl = this;
+}
+
+ReusePanelCtrl.prototype.closeDialog = function() {
+  this._mdPanelRef && this._mdPanelRef.hide();
+};
+
+})();

src/components/panel/demoReuse/style.global.css

@@ -0,0 +1,13 @@
+.demo-dialog-content {
+  padding: 0 15px;
+  width: 100%;
+}
+
+.demo-dialog-content img {
+  height: 300px;
+  margin: auto;
+}
+
+.demo-dialog-button {
+  width: 100%;
+}

src/components/panel/panel.js

@@ -3356,7 +3356,8 @@ MdPanelAnimation.prototype.animateOpen = function(panelEl) {
       panelEl.css('opacity', '1');
 
       animationOptions = {
-        transitionInClass: '_md-panel-animate-enter'
+        transitionInClass: '_md-panel-animate-enter',
+        transitionOutClass: '_md-panel-animate-leave',
       };
 
       var openSlide = animator.calculateSlideToOrigin(
@@ -3421,7 +3422,8 @@ MdPanelAnimation.prototype.animateClose = function(panelEl) {
       // Slide should start with opacity: 1.
       panelEl.css('opacity', '1');
       reverseAnimationOptions = {
-        transitionInClass: '_md-panel-animate-leave'
+        transitionInClass: '_md-panel-animate-leave',
+        transitionOutClass: '_md-panel-animate-enter _md-panel-animate-leave'
       };
 
       var closeSlide = animator.calculateSlideToOrigin(
@@ -3431,7 +3433,8 @@ MdPanelAnimation.prototype.animateClose = function(panelEl) {
 
     case MdPanelAnimation.animation.SCALE:
       reverseAnimationOptions = {
-        transitionInClass: '_md-panel-animate-scale-out _md-panel-animate-leave'
+        transitionInClass: '_md-panel-animate-scale-out _md-panel-animate-leave',
+        transitionOutClass: '_md-panel-animate-scale-out _md-panel-animate-enter _md-panel-animate-leave'
       };
 
       var closeScale = animator.calculateZoomToOrigin(
@@ -3441,7 +3444,8 @@ MdPanelAnimation.prototype.animateClose = function(panelEl) {
 
     case MdPanelAnimation.animation.FADE:
       reverseAnimationOptions = {
-        transitionInClass: '_md-panel-animate-fade-out _md-panel-animate-leave'
+        transitionInClass: '_md-panel-animate-fade-out _md-panel-animate-leave',
+        transitionOutClass: '_md-panel-animate-fade-out _md-panel-animate-enter _md-panel-animate-leave'
       };
       break;