Question

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

但是使用此动画设置时，它会逆时针旋转，并具有过渡状态＆＃39;隐藏＆＃39;显示＆＃39;。如何让它顺时针旋转？

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

为＆＃39; hide =＆gt;添加样式{ transform: 'rotate(-360deg)' }显示＆＃39;，正确暗示浏览器将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'))
    ]);

Angular2动画旋转方向？

1 个答案: