From cb1cacab424a76847d33ff011e94e3a361c6e30f Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Wed, 8 Jun 2016 12:23:47 -0500 Subject: [PATCH] refactor(inset-modal): inset-modal fixes (#6809) inset-modal fixes --- src/components/modal/modal.ios.scss | 5 ++ src/components/modal/modal.md.scss | 5 ++ src/components/modal/modal.scss | 6 +- src/components/modal/modal.ts | 85 +++++++++++++++++------------ src/components/modal/modal.wp.scss | 5 ++ 5 files changed, 67 insertions(+), 39 deletions(-) diff --git a/src/components/modal/modal.ios.scss b/src/components/modal/modal.ios.scss index 2b85a9a162..4d6337a398 100644 --- a/src/components/modal/modal.ios.scss +++ b/src/components/modal/modal.ios.scss @@ -5,3 +5,8 @@ $modal-ios-background-color: $background-ios-color !default; $modal-ios-border-radius: 5px !default; + +.modal-wrapper { + // hidden by default to prevent flickers, the animation will show it + transform: translate3d(0, 100%, 0); +} diff --git a/src/components/modal/modal.md.scss b/src/components/modal/modal.md.scss index 809a36c16c..1e1d123bdd 100644 --- a/src/components/modal/modal.md.scss +++ b/src/components/modal/modal.md.scss @@ -4,3 +4,8 @@ // -------------------------------------------------- $modal-md-background-color: $background-md-color !default; + +.modal-wrapper { + opacity: .01; + transform: translate3d(0, 40px, 0); +} diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss index 2686212e9f..38bafbd019 100644 --- a/src/components/modal/modal.scss +++ b/src/components/modal/modal.scss @@ -10,7 +10,7 @@ $modal-inset-width: 600px !default; $modal-inset-height-small: 500px !default; $modal-inset-height-large: 600px !default; -.modal { +ion-modal { position: absolute; top: 0; left: 0; @@ -22,7 +22,7 @@ $modal-inset-height-large: 600px !default; ion-backdrop { @media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { - display: none; + visibility: hidden; } } } @@ -31,8 +31,6 @@ $modal-inset-height-large: 600px !default; z-index: 10; height: 100%; - // hidden by default to prevent flickers, the animation will show it - transform: translate3d(0, 100%, 0); @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { position: absolute; diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index 2b415962a6..6363ffd3ea 100644 --- a/src/components/modal/modal.ts +++ b/src/components/modal/modal.ts @@ -8,6 +8,8 @@ import {Transition, TransitionOptions} from '../../transitions/transition'; import {ViewController} from '../nav/view-controller'; import {windowDimensions} from '../../util/dom'; +import {nativeRaf, CSS} from '../../util/dom'; + /** * @name Modal * @description @@ -185,36 +187,43 @@ export class ModalCmp { /** * Animations for modals */ -class ModalSlideIn extends Transition { - constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) { - super(opts); + class ModalSlideIn extends Transition { + constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) { + super(opts); - let ele = enteringView.pageRef().nativeElement; - let backdrop = new Animation(ele.querySelector('ion-backdrop')); - backdrop.fromTo('opacity', 0.01, 0.4); - let wrapper = new Animation(ele.querySelector('.modal-wrapper')); - let page = ele.querySelector('ion-page'); + let ele = enteringView.pageRef().nativeElement; + let backdropEle = ele.querySelector('ion-backdrop'); + let backdrop = new Animation(backdropEle); + let wrapper = new Animation(ele.querySelector('.modal-wrapper')); + let page = ele.querySelector('ion-page'); + let pageAnimation = new Animation(page); - // auto-add page css className created from component JS class name - let cssClassName = pascalCaseToDashCase((enteringView).modalViewType); - page.classList.add(cssClassName); + // auto-add page css className created from component JS class name + let cssClassName = pascalCaseToDashCase((enteringView).modalViewType); + pageAnimation.before.addClass(cssClassName); + pageAnimation.before.addClass('show-page'); - wrapper.fromTo('translateY', '100%', '0%'); + backdrop.fromTo('opacity', 0.01, 0.4); + wrapper.fromTo('translateY', '100%', '0%'); - const DURATION = 400; - const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; - this.element(enteringView.pageRef()).easing(EASING).duration(DURATION).add(backdrop).add(wrapper); - this.element(new ElementRef(page)).easing(EASING).duration(DURATION).before.addClass('show-page'); - if (enteringView.hasNavbar()) { - // entering page has a navbar - let enteringNavBar = new Animation(enteringView.navbarRef()); - enteringNavBar.before.addClass('show-navbar'); - this.add(enteringNavBar); - } - } -} -Transition.register('modal-slide-in', ModalSlideIn); + this + .element(enteringView.pageRef()) + .easing('cubic-bezier(0.36,0.66,0.04,1)') + .duration(400) + .add(backdrop) + .add(wrapper) + .add(pageAnimation); + + if (enteringView.hasNavbar()) { + // entering page has a navbar + let enteringNavBar = new Animation(enteringView.navbarRef()); + enteringNavBar.before.addClass('show-navbar'); + this.add(enteringNavBar); + } + } + } + Transition.register('modal-slide-in', ModalSlideIn); class ModalSlideOut extends Transition { @@ -222,9 +231,7 @@ class ModalSlideOut extends Transition { super(opts); let ele = leavingView.pageRef().nativeElement; - let backdrop = new Animation(ele.querySelector('ion-backdrop')); - backdrop.fromTo('opacity', 0.4, 0.0); let wrapperEle = ele.querySelector('.modal-wrapper'); let wrapperEleRect = wrapperEle.getBoundingClientRect(); let wrapper = new Animation(wrapperEle); @@ -233,6 +240,7 @@ class ModalSlideOut extends Transition { // so it's off-screen let screenDimensions = windowDimensions(); wrapper.fromTo('translateY', '0px', `${screenDimensions.height - wrapperEleRect.top}px`); + backdrop.fromTo('opacity', 0.4, 0.0); this .element(leavingView.pageRef()) @@ -251,20 +259,26 @@ class ModalMDSlideIn extends Transition { let ele = enteringView.pageRef().nativeElement; let backdrop = new Animation(ele.querySelector('ion-backdrop')); - backdrop.fromTo('opacity', 0.01, 0.4); let wrapper = new Animation(ele.querySelector('.modal-wrapper')); - wrapper.fromTo('translateY', '40px', '0px'); let page = ele.querySelector('ion-page'); - + let pageAnimation = new Animation(page); // auto-add page css className created from component JS class name let cssClassName = pascalCaseToDashCase((enteringView).modalViewType); - page.classList.add(cssClassName); + pageAnimation.before.addClass(cssClassName); + pageAnimation.before.addClass('show-page'); + + + backdrop.fromTo('opacity', 0.01, 0.4); + wrapper.fromTo('translateY', '40px', '0px'); + wrapper.fromTo('opacity', '0.01', '1.0'); const DURATION = 280; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; - this.element(enteringView.pageRef()).easing(EASING).duration(DURATION).fadeIn().add(backdrop).add(wrapper); - this.element(new ElementRef(page)).easing(EASING).duration(DURATION).before.addClass('show-page'); + this.element(enteringView.pageRef()).easing(EASING).duration(DURATION) + .add(backdrop) + .add(wrapper) + .add(pageAnimation); if (enteringView.hasNavbar()) { // entering page has a navbar @@ -283,15 +297,16 @@ class ModalMDSlideOut extends Transition { let ele = leavingView.pageRef().nativeElement; let backdrop = new Animation(ele.querySelector('ion-backdrop')); - backdrop.fromTo('opacity', 0.4, 0.0); let wrapper = new Animation(ele.querySelector('.modal-wrapper')); + + backdrop.fromTo('opacity', 0.4, 0.0); wrapper.fromTo('translateY', '0px', '40px'); + wrapper.fromTo('opacity', '1.0', '0.00'); this .element(leavingView.pageRef()) .duration(200) .easing('cubic-bezier(0.47,0,0.745,0.715)') - .fadeOut() .add(wrapper) .add(backdrop); } diff --git a/src/components/modal/modal.wp.scss b/src/components/modal/modal.wp.scss index b0837f7a18..52d24ffcad 100644 --- a/src/components/modal/modal.wp.scss +++ b/src/components/modal/modal.wp.scss @@ -4,3 +4,8 @@ // -------------------------------------------------- $modal-wp-background-color: $background-wp-color !default; + +.modal-wrapper { + opacity: .01; + transform: translate3d(0, 40px, 0); +}