[Menu] Animation doesn't match spec

[vladimir-barsuchenko]

Bug, feature request, or proposal:

Bug / Proposal

What is the expected behavior?

To have panel animation match specs.
Material Components For Web
Material Design

What is the current behavior?

Mat menu-content opacity duration is shorter than in specs.
Menu is shown almost without opacity transition. And I can see how content is transformed (stretched).
Also menu has X position animated which is different from specs

What are the steps to reproduce?

https://stackblitz.com/angular/mjvedxgkvqg

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

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

Angular v5.1. Material v.5.1

Is there anything else we should know?

[julianobrasil]

Your stackblitz link is broken.

[vladimir-barsuchenko]

updated

[willshowell]

The animation was changed in #5361 to better match the spec examples

[vladimir-barsuchenko]

@willshowell could you elaborate? Because links say different:
Material Components For Web
Material Design

[willshowell]

I think they follow the material.io guidelines, not the material-components implementation.

While I do believe the new animation better matches the spec, the animation here does seem to be different from the current implementation. It seems like the content opacity animation needs to be delayed slightly more...

https://github.com/angular/material2/blob/2fb4d618725b6fddc1a94e5e85ea80577377f1eb/src/lib/menu/menu-animations.ts#L55-L65

[crisbeto]

If you're running Angular 5.1, the opacity won't be animated due to an issue with @angular/animations. See angular/angular#20946.

[vladimir-barsuchenko]

@crisbeto, cool. Waiting for a fix then