时间戳

首页 > 解决方案 > 如何为图标设置动画？

vmware-clarity - 如何为图标设置动画？

问题描述

我在 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;
}

但它没有动画。

标签： vmware-clarity

解决方案

通过写作：

<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

推荐阅读