Skip to content

Commit 6136ee7

Browse files
crisbetovivian-hu-zz
authored andcommitted
feat(experimental/dialog): add the ability to control the animation duration (#13694)
For keeping parity with the Material dialog (#13466), adds the ability for consumers to configure the animation duration of the dialog.
1 parent 5851c91 commit 6136ee7

File tree

2 files changed

+17
-4
lines changed

2 files changed

+17
-4
lines changed

src/cdk-experimental/dialog/dialog-config.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,10 @@ export class DialogConfig<D = any> {
8686

8787
/** Whether the dialog should focus the first focusable element on open. */
8888
autoFocus?: boolean = true;
89+
90+
/** Duration of the enter animation. Has to be a valid CSS value (e.g. 100ms). */
91+
enterAnimationDuration?: string = '225ms';
92+
93+
/** Duration of the exit animation. Has to be a valid CSS value (e.g. 50ms). */
94+
exitAnimationDuration?: string = '225ms';
8995
}

src/cdk-experimental/dialog/dialog-container.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,20 @@ export function throwDialogContentAlreadyAttachedError() {
5454
changeDetection: ChangeDetectionStrategy.Default,
5555
animations: [
5656
trigger('dialog', [
57-
state('enter', style({ opacity: 1 })),
58-
state('exit, void', style({ opacity: 0 })),
59-
transition('* => *', animate(225)),
57+
state('enter', style({opacity: 1})),
58+
state('exit, void', style({opacity: 0})),
59+
transition('* => enter', animate('{{enterAnimationDuration}}')),
60+
transition('* => exit, * => void', animate('{{exitAnimationDuration}}')),
6061
])
6162
],
6263
host: {
63-
'[@dialog]': '_state',
64+
'[@dialog]': `{
65+
value: _state,
66+
params: {
67+
enterAnimationDuration: _config.enterAnimationDuration,
68+
exitAnimationDuration: _config.exitAnimationDuration
69+
}
70+
}`,
6471
'(@dialog.start)': '_onAnimationStart($event)',
6572
'(@dialog.done)': '_animationDone.next($event)',
6673
},

0 commit comments

Comments
 (0)