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',