From 1d0d7552140b94dc310fadc1468e262ca290a222 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 26 May 2016 13:29:57 -0400
Subject: [PATCH] feat(popover): add MD animation

references #5420
---
 src/components/popover/popover.md.scss | 10 ++++++++++
 src/components/popover/popover.ts      | 16 +++++++++++-----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/popover/popover.md.scss b/src/components/popover/popover.md.scss
index 992b8b8753c..d4e3a442fb9 100644
--- a/src/components/popover/popover.md.scss
+++ b/src/components/popover/popover.md.scss
@@ -14,8 +14,14 @@ $popover-md-box-shadow:                0 3px 12px 2px $alert-md-box-shadow-color
 
 $popover-md-item-background:           $popover-md-background !default;
 
+.popover-wrapper {
+  opacity: 1;
+}
 
 .popover-content {
+  min-width: 0;
+  min-height: 0;
+
   width: $popover-md-width;
 
   max-height: $popover-md-max-height;
@@ -29,3 +35,7 @@ $popover-md-item-background:           $popover-md-background !default;
 .popover-content .item {
   background-color: $popover-md-item-background;
 }
+
+.popover-viewport {
+  opacity: 0;
+}
diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts
index d58e39433bd..d9275b510c7 100644
--- a/src/components/popover/popover.ts
+++ b/src/components/popover/popover.ts
@@ -158,7 +158,9 @@ export class Popover extends ViewController {
     '<div class="popover-wrapper">' +
       '<div class="popover-arrow"></div>' +
       '<div class="popover-content">' +
-        '<div #viewport></div>' +
+        '<div class="popover-viewport">' +
+          '<div #viewport></div>' +
+        '</div>' +
       '</div>' +
     '</div>'
 })
@@ -365,14 +367,18 @@ class PopoverMdPopIn extends PopoverTransition {
     let ele = enteringView.pageRef().nativeElement;
 
     let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
+    let content = new Animation(ele.querySelector('.popover-content'));
+    let viewport = new Animation(ele.querySelector('.popover-viewport'));
 
-    wrapper.fromTo('opacity', '0.01', '1');
+    content.fromTo('maxWidth', '0%', '90%');
+    content.fromTo('maxHeight', '0%', '90%');
+    viewport.fromTo('opacity', '0', '1');
 
     this
       .easing('ease')
-      .duration(100)
-      .fadeIn()
-      .add(wrapper);
+      .duration(500)
+      .add(content)
+      .add(viewport);
   }
 
   play() {