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

inset-modal fixes
ionic-team · Jun 8, 2016 · cb1caca · cb1caca
1 parent d23c75a
commit cb1caca
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,46 +187,51 @@ export class ModalCmp {
 /**
  * Animations for modals
  */
-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 = <HTMLElement> ele.querySelector('ion-page');
-
-    // auto-add page css className created from component JS class name
-    let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
-    page.classList.add(cssClassName);
-
-    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);
+ class ModalSlideIn extends Transition {
+   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
+     super(opts);
+
+     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 = <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);
+     pageAnimation.before.addClass(cssClassName);
+     pageAnimation.before.addClass('show-page');
+
+     backdrop.fromTo('opacity', 0.01, 0.4);
+     wrapper.fromTo('translateY', '100%', '0%');
+
+
+     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 {
   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
     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(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
@@ -4,3 +4,8 @@
 // --------------------------------------------------
 
 $modal-wp-background-color:          $background-wp-color !default;
+
+.modal-wrapper {
+  opacity: .01;
+  transform: translate3d(0, 40px, 0);
+}