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( () => {