I have a menu icon within Angular2, which should always rotates clockwise. When show, it should rotates from -360 degree to -180 degree. When hide, it should rotates from -180 degree to 0 degree.
But with this animation settings it rotates counterclockwise with transition state 'hide' to 'show'. How can I make it rotate clockwise?
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'))
]);
Add style { transform: 'rotate(-360deg)' } for 'hide => show', to properly hint browser to treat 0 deg as -360 deg (although they are logically the same).
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'))
]);