Angular2动画旋转方向？

Question

我在Angular2中有一个菜单图标，它应该总是顺时针旋转。 显示时，应从-360度旋转至-180度。 隐藏时，应该从-180度旋转到0度。

但是通过这个动画设置，它将逆时针旋转，并将过渡状态'hide'变为'show'。我怎样才能让它顺时针旋转？

export const MenuButtonAnimation = trigger('menuState', [ 
     state('hide', style({ transform: 'rotate(0)' })), 
     state('show', style({ transform: 'rotate(-180deg)' })), 
     transition('hide => show', animate('350ms ease-out')), 
     transition('show => hide', animate('350ms ease-in')) 
    ]); 

Answer 1

添加风格{ transform: 'rotate(-360deg)' }为“隐藏=>秀”，以正确提示浏览器来治疗0度-360为度（尽管它们在逻辑上是相同的）。

export const MenuButtonAnimation = trigger('menuState', [ 
     state('hide', style({ transform: 'rotate(0)' })), 
     state('show', style({ transform: 'rotate(-180deg)' })), 
     transition('hide => show', [style({transform: 'rotate(-360deg)'}), animate('350ms ease-out')]), 
     transition('show => hide', animate('350ms ease-in')) 
    ]);