Angular2アニメーションの回転方向は？

Question

Angular2にメニューアイコンがあります。メニューアイコンは常に時計回りに回転します。 表示すると、-360度から-180度まで回転します。 非表示にすると、-180度から0度に回転する必要があります。

このアニメーション設定では、遷移状態 '非表示'から '表示'まで反時計回りに回転します。どのように時計回りに回転させることができますか？

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

適切-360度と0度を治療するためのブラウザをヒントし、「非表示=>ショー」のスタイル{ transform: 'rotate(-360deg)' }を追加します（これらは論理的に同じであるが）。

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