feat(popover): change MD animation and use for WP also

references #5420

Author: brandyscarney

src/components/popover/popover.md.scss

@@ -14,9 +14,6 @@ $popover-md-box-shadow:                0 3px 12px 2px $popover-md-box-shadow-col
 
 $popover-md-item-background:           $popover-md-background !default;
 
-.popover-wrapper {
-  opacity: 1;
-}
 
 .popover-content {
   width: $popover-md-width;
@@ -38,4 +35,5 @@ $popover-md-item-background:           $popover-md-background !default;
 
 .popover-viewport {
   opacity: 0;
+  transition-delay: 100ms;
 }

src/components/popover/popover.ts

@@ -7,7 +7,7 @@ import {Config} from '../../config/config';
 import {NavParams} from '../nav/nav-params';
 import {Platform} from '../../platform/platform';
 import {isPresent, isUndefined, isDefined} from '../../util/util';
-import {nativeRaf} from '../../util/dom';
+import {nativeRaf, CSS} from '../../util/dom';
 import {ViewController} from '../nav/view-controller';
 
 const POPOVER_BODY_PADDING = 2;
@@ -245,6 +245,8 @@ class PopoverTransition extends Transition {
     let originY = 'top';
     let originX = 'left';
 
+    let popoverWrapperEle = <HTMLElement>nativeEle.querySelector('.popover-wrapper');
+
     // Popover content width and height
     let popoverEle = <HTMLElement>nativeEle.querySelector('.popover-content');
     let popoverDim = popoverEle.getBoundingClientRect();
@@ -313,7 +315,11 @@ class PopoverTransition extends Transition {
     popoverEle.style.top = popoverCSS.top + 'px';
     popoverEle.style.left = popoverCSS.left + 'px';
 
-    popoverEle.style.transformOrigin = originY + " " + originX;
+    popoverEle.style[CSS.transformOrigin] = originY + " " + originX;
+
+    // Since the transition starts before styling is done we
+    // want to wait for the styles to apply before showing the wrapper
+    popoverWrapperEle.style.opacity = '1';
   }
 }
 
@@ -373,16 +379,15 @@ 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'));
 
-    content.fromTo('scale', '0', '1');
+    content.fromTo('scale', '0.001', '1');
     viewport.fromTo('opacity', '0', '1');
 
     this
-      .easing('cubic-bezier(.55,0,.55,.2)')
-      .duration(500)
+      .easing('cubic-bezier(0.36,0.66,0.04,1)')
+      .duration(300)
       .add(content)
       .add(viewport);
   }
@@ -416,50 +421,4 @@ class PopoverMdPopOut extends PopoverTransition {
 Transition.register('popover-md-pop-out', PopoverMdPopOut);
 
 
-
-class PopoverWpPopIn extends PopoverTransition {
-  constructor(private enteringView: ViewController, private leavingView: ViewController, private opts: TransitionOptions) {
-    super(opts);
-
-    let ele = enteringView.pageRef().nativeElement;
-
-    let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
-
-    wrapper.fromTo('opacity', '0.01', '1');
-
-    this
-      .easing('ease')
-      .duration(100)
-      .fadeIn()
-      .add(wrapper);
-  }
-
-  play() {
-    nativeRaf(() => {
-      this.positionView(this.enteringView.pageRef().nativeElement, this.opts.ev);
-      super.play();
-    });
-  }
-}
-Transition.register('popover-wp-pop-in', PopoverWpPopIn);
-
-
-class PopoverWpPopOut extends PopoverTransition {
-  constructor(private enteringView: ViewController, private leavingView: ViewController, private opts: TransitionOptions) {
-    super(opts);
-
-    let ele = leavingView.pageRef().nativeElement;
-    let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
-
-    wrapper.fromTo('opacity', '1', '0');
-
-    this
-      .easing('ease')
-      .duration(500)
-      .fadeIn()
-      .add(wrapper);
-  }
-}
-Transition.register('popover-wp-pop-out', PopoverWpPopOut);
-
 let popoverIds = -1;

src/components/popover/popover.wp.scss

@@ -16,15 +16,23 @@ $popover-wp-item-background:           $popover-wp-background !default;
 
 .popover-content {
   width: $popover-wp-width;
-
+  min-width: 0;
+  min-height: 0;
   max-height: $popover-wp-max-height;
 
   border: $popover-wp-border;
   border-radius: $popover-wp-border-radius;
   color: $popover-wp-text-color;
   background: $popover-wp-background;
+
+  transform-origin: top left;
 }
 
 .popover-content .item {
   background-color: $popover-wp-item-background;
 }
+
+.popover-viewport {
+  opacity: 0;
+  transition-delay: 100ms;
+}

src/config/modes.ts

@@ -117,8 +117,8 @@ Config.setModeConfig('wp', {
   pickerEnter: 'picker-slide-in',
   pickerLeave: 'picker-slide-out',
 
-  popoverEnter: 'popover-wp-pop-in',
-  popoverLeave: 'popover-wp-pop-out',
+  popoverEnter: 'popover-md-pop-in',
+  popoverLeave: 'popover-md-pop-out',
 
   spinner: 'circles',
 

src/util/dom.ts

@@ -57,6 +57,7 @@ export let CSS: {
   transitionTimingFn?: string,
   transitionStart?: string,
   transitionEnd?: string,
+  transformOrigin?: string
 } = {};
 
 (function() {
@@ -94,6 +95,9 @@ export let CSS: {
 
   // To be sure transitionend works everywhere, include *both* the webkit and non-webkit events
   CSS.transitionEnd = (isWebkit ? 'webkitTransitionEnd ' : '') + 'transitionend';
+
+  // transform origin
+  CSS.transformOrigin = (isWebkit ? '-webkit-' : '') + 'transform-origin';
 })();