question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Dialog] Allow customization of open/close animations

See original GitHub issue

Bug, 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:closed
  • Created 6 years ago
  • Reactions:151
  • Comments:46 (7 by maintainers)

github_iconTop GitHub Comments

23reactions
omieliekhcommented, Jul 2, 2018

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):

import { MatMenu } from '@angular/material';

import {
  animate,
  state,
  style,
  transition,
  trigger
} from '@angular/animations';

MatMenu['decorators'][0].args[0].animations[0] = trigger('transformMenu', [
  state('void', style({
    opacity: 0,
    transform: 'scale(0, 0)'
  })),
  state('enter-start', style({
    opacity: 0,
    transform: 'scale(0, 0)'
  })),
  state('enter', style({
    opacity: 1,
    transform: 'scale(1, 1)'
  })),
  transition('void => enter-start', animate('0ms ease-in-out')),
  transition('enter-start => enter', animate('300ms ease-in-out')),
  transition('* => void', animate('300ms ease-in-out', style({ opacity: 0 })))
]);

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 for animations there.

19reactions
pburkindinecommented, May 25, 2019

Upvote

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found