如何为图标设置动画？

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