From 44a7da8adc968221dd4dcf56f90c6e5de6e79aab Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 27 May 2016 12:46:33 -0400 Subject: [PATCH] feat(popover): change MD animation and use for WP also references #5420 --- src/components/popover/popover.md.scss | 4 +- src/components/popover/popover.ts | 63 +++++--------------------- src/components/popover/popover.wp.scss | 10 +++- src/config/modes.ts | 4 +- src/util/dom.ts | 4 ++ 5 files changed, 27 insertions(+), 58 deletions(-) diff --git a/src/components/popover/popover.md.scss b/src/components/popover/popover.md.scss index 34b5335da05..6647a5a3d55 100644 --- a/src/components/popover/popover.md.scss +++ b/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; } diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts index fed69814dd2..5f18b2bd000 100644 --- a/src/components/popover/popover.ts +++ b/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 = nativeEle.querySelector('.popover-wrapper'); + // Popover content width and height let popoverEle = 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; diff --git a/src/components/popover/popover.wp.scss b/src/components/popover/popover.wp.scss index 97df352c826..a26cc8c90a5 100644 --- a/src/components/popover/popover.wp.scss +++ b/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; +} diff --git a/src/config/modes.ts b/src/config/modes.ts index 48a89a9186e..95697efeca6 100644 --- a/src/config/modes.ts +++ b/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', diff --git a/src/util/dom.ts b/src/util/dom.ts index 6684600486c..c6a281d4c40 100644 --- a/src/util/dom.ts +++ b/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'; })();