如何根据点击以角度使用css3制作动画？答案

【问题标题】：How to animate using css3 in angular based on click?如何根据点击以角度使用css3制作动画？
【发布时间】：2017-12-15 11:23:07
【问题描述】：

我有一个使用引导图标的跨度。我试图在单击时淡出和淡入相同的元素（跨度），但切换类（图标）。

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

animate-fade class 是我希望在每次点击时触发的。

顺便说一句，我不想使用 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>

【问题讨论】：

标签： html css angular animation

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

【讨论】：