html - 如何根据点击以 Angular 使用css3进行动画处理？

Question

我有一个使用 Bootstrap 图标的跨度。我试图在单击时淡出和淡入同一元素(跨度)，但切换类(图标)。

我有一个名为 showLegend 的 bool 变量，基于它的值，我想为跨度设置动画。我知道它在元素初始化时起作用，如果我将它作为一个类来提供。但是，我想在每次单击时触发动画(即，调用 toggleTrendLegend() 函数时，如 plunker 所示)。请告诉我该怎么做？

animate-fade 类是我想在每次点击时触发的类。

附带说明一下，我不想使用 Angular Animation，因为它对于简单的动画来说会变得很重。

我创建了一个 plunker here

这是引用代码:

<div class="show-hide">

   <span (click)="toggleTrendLegend()" [class]="showLegend == true ? 'animate-fade glyphicon adjust-eye glyphicon-eye-close' : 'glyphicon adjust-eye glyphicon-eye-open'"></span>

</div>

Answer 1

几种方法:

使用 class.yourClass

<span (click)="showLegend = !showLegend" [class.animate-fade.glyphicon-adjust-eye.glyphicon-eye-close]="showLegend" [class.animate-fade.glyphicon-adjust-eye.glyphicon-eye-close]="!showLegend"></span>

使用 ngClass

<span (click)="showLegend = !showLegend" [ngClass]="{'animate-fade glyphicon adjust-eye glyphicon-eye-close' : showLegend, 'glyphicon adjust-eye glyphicon-eye-open': !showLegend}"></span>

有动画:please refer to the documentation

在任何情况下，都不要忘记动画!

transition: all 275ms ease-in-out;