diff --git a/ionic/components/modal/modal.ts b/ionic/components/modal/modal.ts index 680dbc899e..791dc6869e 100644 --- a/ionic/components/modal/modal.ts +++ b/ionic/components/modal/modal.ts @@ -12,11 +12,11 @@ import * as util from 'ionic/util'; * @usage * ```ts * class MyApp { - * + * * constructor(modal: Modal, app: IonicApp, ionicConfig: IonicConfig) { * this.modal = modal; * } - * + * * openModal() { * this.modal.open(ContactModal, { * enterAnimation: 'my-fade-in', @@ -38,8 +38,8 @@ export class Modal extends Overlay { */ open(ComponentType: Type, opts={}) { let defaults = { - enterAnimation: 'modal-slide-in', - leaveAnimation: 'modal-slide-out', + enterAnimation: this.config.setting('modalEnter') || 'modal-slide-in', + leaveAnimation: this.config.setting('modalLeave') || 'modal-slide-out', }; return this.create(OVERLAY_TYPE, ComponentType, util.extend(defaults, opts)); @@ -69,7 +69,7 @@ class ModalSlideIn extends Animation { constructor(element) { super(element); this - .easing('cubic-bezier(.36,.66,.04,1)') + .easing('cubic-bezier(0.36,0.66,0.04,1)') .duration(400) .fromTo('translateY', '100%', '0%'); } @@ -87,3 +87,29 @@ class ModalSlideOut extends Animation { } } Animation.register('modal-slide-out', ModalSlideOut); + + +class ModalMDSlideIn extends Animation { + constructor(element) { + super(element); + this + .easing('cubic-bezier(0.36,0.66,0.04,1)') + .duration(280) + .fromTo('translateY', '40px', '0px') + .fadeIn(); + } +} +Animation.register('modal-md-slide-in', ModalMDSlideIn); + + +class ModalMDSlideOut extends Animation { + constructor(element) { + super(element); + this + .duration(200) + .easing('cubic-bezier(0.47,0,0.745,0.715)') + .fromTo('translateY', '0px', '40px') + .fadeOut(); + } +} +Animation.register('modal-md-slide-out', ModalMDSlideOut); diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts index 54108b95d1..f21fab5ced 100644 --- a/ionic/components/modal/test/basic/index.ts +++ b/ionic/components/modal/test/basic/index.ts @@ -33,6 +33,10 @@ class MyAppCmp { } openModal() { + this.modal.open(ContactModal); + } + + openModalCustomAnimation() { this.modal.open(ContactModal, { enterAnimation: 'my-fade-in', leaveAnimation: 'my-fade-out', diff --git a/ionic/components/modal/test/basic/main.html b/ionic/components/modal/test/basic/main.html index fe2467f683..9e2e9aaba0 100644 --- a/ionic/components/modal/test/basic/main.html +++ b/ionic/components/modal/test/basic/main.html @@ -1,3 +1,9 @@ + - + + + + + + diff --git a/ionic/config/modes.ts b/ionic/config/modes.ts index 6411ca3c88..509c0a854f 100644 --- a/ionic/config/modes.ts +++ b/ionic/config/modes.ts @@ -15,6 +15,9 @@ IonicConfig.modeConfig('ios', { iconMode: 'ios', + modalEnter: 'modal-slide-in', + modalLeave: 'modal-slide-out', + tabBarPlacement: 'bottom', viewTransition: 'ios', @@ -34,6 +37,9 @@ IonicConfig.modeConfig('md', { iconMode: 'md', + modalEnter: 'modal-md-slide-in', + modalLeave: 'modal-md-slide-out', + tabBarPlacement: 'top', viewTransition: 'md',