fix(panel): Fixes custom animations in the demo to account for opacity.

Author: ErinCoughlan

src/components/panel/demoPanelAnimations/script.js

@@ -82,7 +82,7 @@ AnimationCtrl.prototype.showDialog = function() {
     hasBackdrop: true,
   };
 
-  this._panelRef = this._mdPanel.open(config);
+  this._mdPanel.open(config);
 };
 
 

src/components/panel/demoPanelAnimations/style.css

@@ -26,11 +26,13 @@
 }
 
 .demo-dialog-custom-animation-open {
+  opacity: 1;
   transition: all 1s linear, opacity 1ms;
   transform: rotate(390deg);
 }
 
 .demo-dialog-custom-animation-close {
+  opacity: 0;
   transition: all 1s linear, opacity 1ms;
   transform: rotate(0deg);
 }

src/components/panel/panel.js

@@ -705,7 +705,7 @@ MdPanelService.prototype.newPanelPosition = function() {
  * @returns {MdPanelAnimation}
  */
 MdPanelService.prototype.newPanelAnimation = function() {
-  return new MdPanelAnimation();
+  return new MdPanelAnimation(this._$injector);
 };
 
 
@@ -749,7 +749,7 @@ function MdPanelRef(config, $injector) {
   /** @private @const {!angular.$mdCompiler} */
   this._$mdCompiler = $injector.get('$mdCompiler');
 
-  /** @private @const */
+  /** @private @const {!angular.$mdConstant} */
   this._$mdConstant = $injector.get('$mdConstant');
 
   /** @private @const {!angular.$mdUtil} */
@@ -1323,7 +1323,7 @@ MdPanelRef.prototype._animateOpen = function() {
       done();
     };
 
-    animationConfig.animateOpen(self._panelEl, self._$mdUtil.dom.animator)
+    animationConfig.animateOpen(self._panelEl)
         .then(done, warnAndOpen);
   });
 };
@@ -1354,7 +1354,7 @@ MdPanelRef.prototype._animateClose = function() {
       done();
     };
 
-    animationConfig.animateClose(self._panelEl, self._$mdUtil.dom.animator)
+    animationConfig.animateClose(self._panelEl)
         .then(done, warnAndClose);
   });
 };
@@ -1833,9 +1833,13 @@ MdPanelPosition.prototype._calculatePanelPosition = function(panelEl) {
  *   animation: panelAnimation
  * });
  *
+ * @param {!angular.$injector} $injector
  * @final @constructor
  */
-function MdPanelAnimation() {
+function MdPanelAnimation($injector) {
+  /** @private @const {!angular.$mdUtil} */
+  this._$mdUtil = $injector.get('$mdUtil');
+
   /**
    * @private {{element: !angular.JQLite|undefined, bounds: !DOMRect}|
    *    undefined}
@@ -1850,9 +1854,6 @@ function MdPanelAnimation() {
 
   /** @private {string|{open: string, close: string} */
   this._animationClass = '';
-
-  /** @private {!angular.$q.Promise|undefined} **/
-  this._reverseAnimation;
 }
 
 
@@ -1947,10 +1948,11 @@ MdPanelAnimation.prototype.withAnimation = function(cssClass) {
 /**
  * Animate the panel open.
  * @param {!angular.JQLite} panelEl
- * @param animator
  * @returns {!angular.$q.Promise}
  */
-MdPanelAnimation.prototype.animateOpen = function(panelEl, animator) {
+MdPanelAnimation.prototype.animateOpen = function(panelEl) {
+  var animator = this._$mdUtil.dom.animator;
+
   this._fixBounds(panelEl);
   var animationOptions = {};
 
@@ -2006,7 +2008,6 @@ MdPanelAnimation.prototype.animateOpen = function(panelEl, animator) {
       // panel transform.
   }
 
-  var self = this;
   return animator
       .translate3d(panelEl, openFrom, openTo, animationOptions);
 };
@@ -2015,10 +2016,10 @@ MdPanelAnimation.prototype.animateOpen = function(panelEl, animator) {
 /**
  * Animate the panel close.
  * @param {!angular.JQLite} panelEl
- * @param animator
  * @returns {!angular.$q.Promise}
  */
-MdPanelAnimation.prototype.animateClose = function(panelEl, animator) {
+MdPanelAnimation.prototype.animateClose = function(panelEl) {
+  var animator = this._$mdUtil.dom.animator;
   var reverseAnimationOptions = {};
 
   // Include the panel transformations when calculating the animations.
@@ -2072,7 +2073,6 @@ MdPanelAnimation.prototype.animateClose = function(panelEl, animator) {
       // panel transform.
   }
 
-  var self = this;
   return animator
       .translate3d(panelEl, closeFrom, closeTo, reverseAnimationOptions);
 };