Question

我有一个使用bootstrap图标的span。我试图淡出并在点击时淡入相同的元素（跨度），但切换类（图标）。

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

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

另一方面，我不想使用角色动画，因为它对于简单的动画来说很重要。

我创建了一个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;

如何使用css3在角度基础上进行动画制作？

1 个答案: