javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
inset-modal fixes
This commit is contained in:
Dan Bucholtz
2016-06-08 12:23:47 -05:00
parent d23c75a229
commit cb1cacab42
5 changed files with 67 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/modal/modal.ios.scss
View File

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

5
src/components/modal/modal.md.scss
View File

@ -4,3 +4,8 @@
// --------------------------------------------------
$modal-md-background-color: $background-md-color !default;
.modal-wrapper {
opacity: .01;
transform: translate3d(0, 40px, 0);
}

6
src/components/modal/modal.scss
View File

@ -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;

55
src/components/modal/modal.ts
View File

@ -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,26 +187,33 @@ export class ModalCmp {
/**
* Animations for modals
*/
class ModalSlideIn extends Transition {
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 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);
page.classList.add(cssClassName);
pageAnimation.before.addClass(cssClassName);
pageAnimation.before.addClass('show-page');
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');
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
@ -213,8 +222,8 @@ class ModalSlideIn extends Transition {
this.add(enteringNavBar);
}
}
}
Transition.register('modal-slide-in', ModalSlideIn);
}
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(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);
}

5
src/components/modal/modal.wp.scss
View File

@ -4,3 +4,8 @@
// --------------------------------------------------
$modal-wp-background-color: $background-wp-color !default;
.modal-wrapper {
opacity: .01;
transform: translate3d(0, 40px, 0);
}