[Dialog] Allow customization of open/close animations
See original GitHub issueBug, feature request, or proposal:
feature
What is the expected behavior?
When open or close dialog,animation should define by developer.
What is the current behavior?
I found that open and close dialog <mat-dialog-container></mat-dialog-container>
will add class ng-animating
,well open will add once and remove within a short time period(less than 0.5s),but in my case,open and close will use different animation,so it doesn’t work for me to overwrite .ng-animating
What is the use-case or motivation for changing an existing behavior?
Add different animation in open and close dialog.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 5.0.0, Material: 5.0.0-rc0, OS: win10, TypeScript: 2.6.1, Browsers: Chrome@62.0.3202.94
Issue Analytics
- State:
- Created 6 years ago
- Reactions:151
- Comments:46 (7 by maintainers)
Top Results From Across the Web
How to create custom animation in angular material dialog?
I am using angular material dialog component code and want to add slide right animation on open/close duration.
Read more >Accessible Modal Dialog With CSS3 Animations - CSS Script
An accessible and CSS3 animated modal component built with JavaScript and native HTML dialog element.
Read more >Disable dialog open/close animation - Quasar forum
Hi, Is there a way to remove the animation when a dialog is opened by calling the Dialog.create() function and when it closes...
Read more >Animation in Angular Dialog component - Syncfusion
The Dialog can be animated during the open and close actions. Also, user can customize animation's delay , duration and effect .
Read more >Custom Dialog in NativeScript | Tutorial - YouTube
In this NativeScript tutorial, I show you how to create your own custom dialog without being tied to the dialogs that come with...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Since there is no way (yet) to override animations officially, there is always dirty hack that will allow you to do that (example is for MatMenu, but works for other elements):
This code for example, replaces one of two angular-animations of MatMenu element, dropdown show/hide animation. It has some limitations - animation name should be the same as original one (
transformMenu
) as well as states…But coupled with property checks it can be quite long-living solution.
To find needed animation’s name and its states, you can to go to the source (in my case
node_modules/@angular/material/esm2015/menu.js
) and search foranimations
there.Upvote