refactor(inset-modal): inset-modal fixes (#6809)

inset-modal fixes

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);
+}

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);
+}

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;

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 {
+ class ModalSlideIn extends Transition {
-  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
-    super(opts);
+     super(opts);
 
-    let ele = enteringView.pageRef().nativeElement;
+     let ele = enteringView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('ion-backdrop'));
+     let backdropEle = ele.querySelector('ion-backdrop');
-    backdrop.fromTo('opacity', 0.01, 0.4);
+     let backdrop = new Animation(backdropEle);
-    let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
+     let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
-    let page = <HTMLElement> ele.querySelector('ion-page');
+     let page = <HTMLElement> ele.querySelector('ion-page');
+     let pageAnimation = new Animation(page);
 
-    // auto-add page css className created from component JS class name
+     // auto-add page css className created from component JS class name
-    let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
+     let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
-    page.classList.add(cssClassName);
+     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()) {
+     this
-      // entering page has a navbar
+       .element(enteringView.pageRef())
-      let enteringNavBar = new Animation(enteringView.navbarRef());
+       .easing('cubic-bezier(0.36,0.66,0.04,1)')
-      enteringNavBar.before.addClass('show-navbar');
+       .duration(400)
-      this.add(enteringNavBar);
+       .add(backdrop)
-    }
+       .add(wrapper)
-  }
+       .add(pageAnimation);
-}
+
-Transition.register('modal-slide-in', ModalSlideIn);
+     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 = <HTMLElement> 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 = <HTMLElement> ele.querySelector('ion-page');
-
+    let pageAnimation = new Animation(page);
 
     // auto-add page css className created from component JS class name
     let cssClassName = pascalCaseToDashCase((<Modal>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(enteringView.pageRef()).easing(EASING).duration(DURATION)
-    this.element(new ElementRef(page)).easing(EASING).duration(DURATION).before.addClass('show-page');
+      .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);
   }

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);
+}