Skip to content

fix(material/dialog): exit animation not being picked up #27372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 27, 2023
Merged

fix(material/dialog): exit animation not being picked up #27372

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/material/dialog/dialog-container.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,11 +158,11 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
/** Host element of the dialog container component. */
private _hostElement: HTMLElement = this._elementRef.nativeElement;
/** Duration of the dialog open animation. */
private _openAnimationDuration = this._animationsEnabled
private _enterAnimationDuration = this._animationsEnabled
? parseCssTime(this._config.enterAnimationDuration) ?? OPEN_ANIMATION_DURATION
: 0;
/** Duration of the dialog close animation. */
private _closeAnimationDuration = this._animationsEnabled
private _exitAnimationDuration = this._animationsEnabled
? parseCssTime(this._config.exitAnimationDuration) ?? CLOSE_ANIMATION_DURATION
: 0;
/** Current timer for dialog animations. */
Expand Down Expand Up @@ -218,19 +218,19 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes

/** Starts the dialog open animation if enabled. */
private _startOpenAnimation() {
this._animationStateChanged.emit({state: 'opening', totalTime: this._openAnimationDuration});
this._animationStateChanged.emit({state: 'opening', totalTime: this._enterAnimationDuration});

if (this._animationsEnabled) {
this._hostElement.style.setProperty(
TRANSITION_DURATION_PROPERTY,
`${this._openAnimationDuration}ms`,
`${this._enterAnimationDuration}ms`,
);

// We need to give the `setProperty` call from above some time to be applied.
// One would expect that the open class is added once the animation finished, but MDC
// uses the open class in combination with the opening class to start the animation.
this._requestAnimationFrame(() => this._hostElement.classList.add(OPENING_CLASS, OPEN_CLASS));
this._waitForAnimationToComplete(this._openAnimationDuration, this._finishDialogOpen);
this._waitForAnimationToComplete(this._enterAnimationDuration, this._finishDialogOpen);
} else {
this._hostElement.classList.add(OPEN_CLASS);
// Note: We could immediately finish the dialog opening here with noop animations,
Expand All @@ -246,18 +246,18 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
* called by the dialog ref.
*/
_startExitAnimation(): void {
this._animationStateChanged.emit({state: 'closing', totalTime: this._closeAnimationDuration});
this._animationStateChanged.emit({state: 'closing', totalTime: this._exitAnimationDuration});
this._hostElement.classList.remove(OPEN_CLASS);

if (this._animationsEnabled) {
this._hostElement.style.setProperty(
TRANSITION_DURATION_PROPERTY,
`${this._openAnimationDuration}ms`,
`${this._exitAnimationDuration}ms`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the actual fix. The rest of the changes are to align the internal terminology with the public API.

);

// We need to give the `setProperty` call from above some time to be applied.
this._requestAnimationFrame(() => this._hostElement.classList.add(CLOSING_CLASS));
this._waitForAnimationToComplete(this._closeAnimationDuration, this._finishDialogClose);
this._waitForAnimationToComplete(this._exitAnimationDuration, this._finishDialogClose);
} else {
// This subscription to the `OverlayRef#backdropClick` observable in the `DialogRef` is
// set up before any user can subscribe to the backdrop click. The subscription triggers
Expand Down Expand Up @@ -286,7 +286,7 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
*/
private _finishDialogOpen = () => {
this._clearAnimationClasses();
this._openAnimationDone(this._openAnimationDuration);
this._openAnimationDone(this._enterAnimationDuration);
};

/**
Expand All @@ -295,7 +295,7 @@ export class MatDialogContainer extends _MatDialogContainerBase implements OnDes
*/
private _finishDialogClose = () => {
this._clearAnimationClasses();
this._animationStateChanged.emit({state: 'closed', totalTime: this._closeAnimationDuration});
this._animationStateChanged.emit({state: 'closed', totalTime: this._exitAnimationDuration});
};

/** Clears all dialog animation classes. */
Expand Down