Angular2动画旋转方向？答案

【问题标题】：Angular2 animation rotate direction?Angular2动画旋转方向？
【发布时间】：2017-10-18 10:43:46
【问题描述】：

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

【问题讨论】：

标签： angular css-animations

【解决方案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'))
    ]);

【讨论】：