adding a second animation using (click) angular

Question

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..

Just adding the class is not enough... if you are interested in how it works and how to solve the problem, have a read here: css-tricks.com/restart-css-animation — Jan Hamara
– Jan Hamara, Commented Oct 29, 2017 at 21:03
yes!!!! perfect!!!!!!!!!!! (I was wrong but not that much after all!!!! — Alex
– Alex, Commented Oct 29, 2017 at 21:32

Moe kanan · Accepted Answer · 2017-10-29 21:26:54Z

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.

answered Oct 29, 2017 at 21:26

Moe kanan

18912 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Over a year ago

yes!!!! perfect!!!!!!!!!!! (I was wrong but not that much after all!!!!

Moe kanan Over a year ago

I'm glad it helped! :)

Moe kanan Over a year ago

@Alex I just noticed you unmarked my answer. Did it not work for you?

V31 · Accepted Answer · 2017-11-01 10:16:26Z

0

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

answered Nov 1, 2017 at 10:16

V31

7,6643 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

adding a second animation using (click) angular

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related