adding a second animation using (click) angular

问题:

Im using the library animate https://daneden.github.io/animate.css/

For adding an animation to whatever you have to add the class animate + nameOfAnimation for example

I want to add a second animation when a button is clicked so I figured something like

<button class="heroe-button animated fadeInLeft" (click)="addClass()"> </button>

addClass():void{
$('.heroe-button').removeClass('fadeInLeft');
$('.heroe-button').addClass('fadeOutRight');
}

But that doesn't do anything.. I have also tryed to add and remove opacity to reset the animation and neither. Few little other tricks but none succesfull.

(Basically what i want to do is that a button fadesin animated and when pressing the button it fades out also animated..

回答1:

This example is from the link @Jan Hamara shared in the comment.

<button class="heroe-button animated fadeInLeft" (click)="addClass()"> </button>

$(".heroe-button").click(function() {
        var el = $(this);

        el.before( el.clone(true) ).remove();
    });

This will create a cloned element and then removes the original element. This way will restart the animation.

回答2:

I think adding jquery to angular would be a bad idea, why not make use of ngClass

[ngClass]="{'style1': isClass1Visible, 'style2': isClass2Visible}"

So in your code it would be like:

<button class="heroe-button animated" [ngClass]={'fadeInLeft': isVisible, 'fadeOutLeft': !isVisible} (click)="changeVisibility()"> </button>

changeVisibility() {
     //Change isVisible variable
}

More documentation on ngClass over here: https://angular.io/api/common/NgClass