如何为图标设置动画？

Question

我在html中有一个图标标签，为：

<clr-icon 
  [attr.shape]="open ? (iconOpen ? iconOpen : 'caret up') : (iconClose ? iconClose : 'caret down')"
  ></clr-icon>

我尝试在CSS中应用这样的过渡：

clr-icon {
   transition: all 2s ease-in-out;
}

但是它没有动画。

Answer 1

通过写作：

<clr-icon [attr.shape]="open ? 'caret up' : 'caret down'"></clr-icon>

您未绑定方向，而是绑定到形状本身。这意味着，每当Angular更新该绑定时，它将强制图标重新呈现全新的形状。

您想要的只是绑定方向，并保持形状不变：

<clr-icon shape="caret" [attr.dir]="open ? 'up' : 'down'"></clr-icon>

您可以在这里看到它运行正常：https://stackblitz.com/edit/clarity-animate-icon?file=src/app/app.component.html