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')) 
    ]);