I'm working with a span that utilizes a Bootstrap icon. My goal is to fade out and fade in the same element (span) on click, while toggling the class (icon).
There's a boolean variable called showLegend which determines whether or not to animate the span. I've managed to make it work when the element initializes by assigning it a class. However, I want the animation to be triggered on every click (i.e., whenever the toggleTrendLegend() function is called, as seen in the Plunker). Can someone please advise me on how to achieve this?
I specifically want to activate the animate-fade class with each click.
As a side note, I'd like to avoid using Angular Animation due to its heavy load for simple animations.
You can find the Plunker reference code here
This snippet demonstrates the setup:
<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>