Components: [Md-Dialog] add animation support on opening and closing.

[scandinave]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

Make dialog opening with custom animation.

What is the current behavior?

Dialog just pop up on the screen

What is the use-case or motivation for changing an existing behavior?

Just Follow the Google material design guideline https://material.io/guidelines/motion/choreography.html#choreography-creation. Part Creation. I want to be able to open dialog from any point and make it expand in any direction.

Which versions of Angular, Material, OS, browsers are affected?

All

[crisbeto]

I've wanted to do this one for a while now. Can I take it @jelbourn?

[atshweza]

@crisbeto and @jelbourn Is this animation feature something that could be done for overlay?It would be great to have slide down animation for Overlay. Currently panel simply appears under OverlayOrigin.

[bradyshutt]

The original feature request was for the ability to use custom animations on the dialog (as in specify which animation/animation type to use). Was this implemented, or was there just the one animation type added? If not, is that something that could be added in?

[crisbeto]

Adding the ability to override the animations is tricky with the current state of Angular, because they have to be statically-analyzable for AoT to work.

[honzajde]

Is there any example on how to use this. The md dialog api/component with animations defined is not exposed (last time I checked). Where would I put my animations to override the defaults? Thx

[crisbeto]

At the moment, Angular doesn't allow for the animations to be overwritten @honzajde.

[bidiu]

Any news to add at this point?

[bkandoori]

I am looking for the same feature , any news on this ?
@crisbeto is there a way I can slide the dialog from top ?

[keithguerin]

We would like this improved for use in the Cloud console. A basic improvement would be opening from its center. Currently it appears to animate up from the bottom, which is strange when you click an item at the top of the page.

[Joycechocho]

Looking for the same feature +1

[tiagowhite]

I am looking for the same feature , any news on this ?
@crisbeto is there a way I can slide the dialog from top ?

Add this to css:
`@-webkit-keyframes fade-in-top {
0% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes fade-in-top {
0% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}

::ng-deep .cdk-overlay-pane {
-webkit-animation: fade-in-top 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in-top 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

::ng-deep .cdk-overlay-container > * {
transition: none;
}`

Not working for leavig animation :(

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}