feat(panel): Add default animations and withAnimation API method.

src/components/panel/demoPanelAnimations/index.html

@@ -0,0 +1,39 @@
+<div class="demo-md-panel-animation md-padding" ng-controller="AnimationCtrl as ctrl">
+  <h2>Animations</h2>
+  <div layout="row">
+    <div flex="33">
+      OpenFrom:
+      <md-radio-group ng-model="ctrl.openFrom">
+        <md-radio-button value="button">Button</md-radio-button>
+        <md-radio-button value="corner">Top/Left Corner</md-radio-button>
+        <md-radio-button value="bottom">Bottom Center</md-radio-button>
+      </md-radio-group>
+    </div>
+
+    <div flex="33">
+      CloseTo:
+      <md-radio-group ng-model="ctrl.closeTo">
+        <md-radio-button value="button">Button</md-radio-button>
+        <md-radio-button value="corner">Top/Left Corner</md-radio-button>
+        <md-radio-button value="bottom">Bottom Center</md-radio-button>
+      </md-radio-group>
+    </div>
+
+    <div flex="33">
+      AnimationType:
+      <md-radio-group ng-model="ctrl.animationType">
+        <md-radio-button value="none">None</md-radio-button>
+        <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>
+
+  <div class="demo-md-panel-content">
+    <md-button class="animation-target md-primary md-raised" ng-click="ctrl.showDialog($event)">
+      Dialog
+    </md-button>
+  </div>
+</div>

src/components/panel/demoPanelAnimations/panel.tmpl.html

@@ -0,0 +1,26 @@
+<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>
+      You hit the secret button. Here's a donut:
+    </p>
+
+    <div layout="row" >
+      <img flex alt="Delicious donut" src="img/donut.jpg">
+    </div>
+  </div>
+
+  <div layout="row" class="demo-dialog-button">
+    <md-button flex class="md-primary">
+      Nothing
+    </md-button>
+    <md-button md-autofocus flex class="md-primary" ng-click="ctrl.closeFn()">
+      Close
+    </md-button>
+  </div>
+</div>

src/components/panel/demoPanelAnimations/script.js

@@ -0,0 +1,94 @@
+angular.module('panelAnimationsDemo', ['ngMaterial'])
+    .controller('AnimationCtrl', AnimationCtrl)
+    .controller('DialogCtrl', DialogCtrl);
+
+
+function AnimationCtrl($mdPanel) {
+  this._mdPanel = $mdPanel;
+  this.openFrom = 'button';
+  this.closeTo = 'button';
+  this.animationType = 'none';
+}
+
+
+AnimationCtrl.prototype.showDialog = function() {
+  var position = this._mdPanel.newPanelPosition()
+      .absolute()
+      .right()
+      .top();
+
+  var animation = this._mdPanel.newPanelAnimation();
+
+  switch(this.openFrom) {
+    case 'button':
+      animation.openFrom('.animation-target');
+      break;
+    case 'corner':
+      animation.openFrom({top:0, left:0});
+      break;
+    case 'bottom':
+      animation.openFrom({
+        top: document.documentElement.clientHeight,
+        left: document.documentElement.clientWidth / 2 - 250
+      });
+  }
+  switch(this.closeTo) {
+    case 'button':
+      animation.closeTo('.animation-target');
+      break;
+    case 'corner':
+      animation.closeTo({top:0, left:0});
+      break;
+    case 'bottom':
+      animation.closeTo({
+        top: document.documentElement.clientHeight,
+        left: document.documentElement.clientWidth / 2 - 250
+      });
+  }
+  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;
+    case 'none':
+      animation = undefined;
+      break;
+  }
+
+  var config = {
+    animation: animation,
+    attachTo: angular.element(document.querySelector('.demo-md-panel-animation')),
+    controller: DialogCtrl,
+    controllerAs: 'ctrl',
+    templateUrl: 'panel.tmpl.html',
+    locals: {
+      closeFn: angular.bind(this, this.closeDialog)
+    },
+    panelClass: 'demo-dialog-example',
+    position: position,
+    trapFocus: true,
+    zIndex: 150
+  };
+
+  this._panelRef = this._mdPanel.open(config);
+};
+
+
+AnimationCtrl.prototype.closeDialog = function() {
+  this._panelRef && this._panelRef.close();
+};
+
+
+// Necessary to pass locals to the dialog template.
+function DialogCtrl() { }

src/components/panel/demoPanelAnimations/style.css

@@ -0,0 +1,36 @@
+.demo-md-panel {
+  min-height: 500px;
+}
+
+.demo-dialog-example {
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
+      0 13px 19px 2px rgba(0, 0, 0, 0.14),
+      0 5px 24px 4px rgba(0, 0, 0, 0.12);
+  width: 500px;
+}
+
+.demo-dialog-content {
+  padding: 0 15px;
+  width: 100%;
+}
+
+.demo-dialog-content img {
+  height: 300px;
+  margin: auto;
+}
+
+.demo-dialog-button {
+  width: 100%;
+}
+
+.demo-dialog-custom-animation-open {
+  transition: all 1s linear, opacity 1ms;
+  transform: rotate(390deg);
+}
+
+.demo-dialog-custom-animation-close {
+  transition: all 1s linear, opacity 1ms;
+  transform: rotate(0deg);
+}