Skip to content

Commit 6d73e88

Browse files
committed
fix(menu): wrong animation in Angular 4.2+
Fixes the new menu animation glitching out against Angular 4.2. It seems like transitioning from `scale(0, 0)` to `scale(1, 0.5)` works correctly at the moment. This is a workaround that will transition it from `scale(0.01, 0.01)` instead.
1 parent b018f26 commit 6d73e88

File tree

1 file changed

+5
-4
lines changed

1 file changed

+5
-4
lines changed

src/lib/menu/menu-animations.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import{
1717

1818
/**
1919
* Below are all the animations for the md-menu component.
20-
* Animation duration and timing values are based on AngularJS Material.
20+
* Animation duration and timing values are based on:
21+
* https://material.io/guidelines/components/menus.html#menus-usage
2122
*/
2223

2324

@@ -34,11 +35,11 @@ import{
3435
export const transformMenu: AnimationTriggerMetadata = trigger('transformMenu', [
3536
state('void', style({
3637
opacity: 0,
37-
transform: 'scale(0, 0)'
38+
transform: 'scale(0.01, 0.01)'
3839
})),
3940
state('enter-start', style({
4041
opacity: 1,
41-
transform: `scale(1, 0.5)`
42+
transform: 'scale(1, 0.5)'
4243
})),
4344
state('enter', style({
4445
transform: 'scale(1, 1)'
@@ -57,6 +58,6 @@ export const fadeInItems: AnimationTriggerMetadata = trigger('fadeInItems', [
5758
state('showing', style({opacity: 1})),
5859
transition('void => *', [
5960
style({opacity: 0}),
60-
animate(`400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)`)
61+
animate('400ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')
6162
])
6263
]);

0 commit comments

Comments
 (0)