diff --git a/src/demo-app/app/dialog-declarative/dialog-declarative.component.html b/src/demo-app/app/dialog-declarative/dialog-declarative.component.html
index 9b82d4095..04c7d228a 100644
--- a/src/demo-app/app/dialog-declarative/dialog-declarative.component.html
+++ b/src/demo-app/app/dialog-declarative/dialog-declarative.component.html
@@ -250,18 +250,32 @@
Dialog configuration object
- enterTransitionDuration?: number; |
+ enterTransitionDuration?: number |
Alter the the transition duration for the enter animation in ms. Defaults to 300ms.
|
- leaveTransitionDuration?: number; |
+ enterTransitionEasingCurve?: string |
+
+ The easing curve for the enter animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)
+ |
+
+
+
+ leaveTransitionDuration?: number |
Alter the the transition duration for the leave animation in ms. Defaults to 250ms.
|
+
+ leaveTransitionEasingCurve?: string |
+
+ The easing curve for the leave animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)
+ |
+
+
diff --git a/src/lib/components/dialog/mdl-dialog-configuration.ts b/src/lib/components/dialog/mdl-dialog-configuration.ts
index 32592710c..eaaf40725 100644
--- a/src/lib/components/dialog/mdl-dialog-configuration.ts
+++ b/src/lib/components/dialog/mdl-dialog-configuration.ts
@@ -89,10 +89,20 @@ export interface IMdlDialogConfiguration {
*/
enterTransitionDuration?: number;
+ /**
+ * The easing curve for the enter animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)
+ */
+ enterTransitionEasingCurve?: string;
+
/**
* The curation for the leave animation in ms. defaults to 250ms
*/
leaveTransitionDuration?: number;
+
+ /**
+ * The easing curve for the leave animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)
+ */
+ leaveTransitionEasingCurve?: string;
}
/**
diff --git a/src/lib/components/dialog/mdl-dialog-host.component.ts b/src/lib/components/dialog/mdl-dialog-host.component.ts
index 406c8c1d9..e634bdb33 100644
--- a/src/lib/components/dialog/mdl-dialog-host.component.ts
+++ b/src/lib/components/dialog/mdl-dialog-host.component.ts
@@ -23,6 +23,9 @@ import { InternalMdlDialogReference } from './internal-dialog-reference';
const enterTransitionDuration = 300;
const leaveTransitionDuration = 250;
+const enterTransitionEasingCurve = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
+const leaveTransitionEasingCurve = 'cubic-bezier(0.0, 0.0, 0.2, 1)';
+
// helper defintions - these classes are private in angular
// but render.animate is public and uses theese defintions
@@ -176,7 +179,9 @@ export class MdlDialogHostComponent implements OnInit {
{offset:0, styles: { styles: [this.showAnimationStartStyle]}},
{offset:1, styles: { styles: [this.showStyle]}}
],
- this.config.enterTransitionDuration || enterTransitionDuration, 0, 'cubic-bezier(0.0, 0.0, 0.2, 1)');
+ this.config.enterTransitionDuration || enterTransitionDuration,
+ 0,
+ this.config.enterTransitionEasingCurve || enterTransitionEasingCurve);
animation.onDone( () => {
this.ngZone.run( () => {
@@ -200,7 +205,9 @@ export class MdlDialogHostComponent implements OnInit {
{offset:0, styles: { styles: [this.showStyle]}},
{offset:1, styles: { styles: [this.hideAnimationEndStyle]}}
],
- this.config.leaveTransitionDuration || leaveTransitionDuration, 0, 'cubic-bezier(0.0, 0.0, 0.2, 1)');
+ this.config.leaveTransitionDuration || leaveTransitionDuration,
+ 0,
+ this.config.leaveTransitionEasingCurve || leaveTransitionEasingCurve);
animation.onDone( () => {
this.ngZone.run( () => {