feat(popover): add MD animation

references #5420
ionic-team · May 26, 2016 · 1d0d755 · 1d0d755
1 parent 1e7b572
commit 1d0d755
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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() {