각도 2 애니메이션 회전 방향?

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