Angular 2 button click animation

Question

I want to animate a scale-down-then-scale-back effect on every button clicks. Here are what I tried:

<button (click)="clickMe()" [ngClass]="{'animated-button': animated}">Button</button>

Here's my CSS:

@keyframes buttonClickAnimation {
  0% {transform: scale(0.8);}
  100% {transform: scale(1);}
}
.animated-button {
  animation: buttonClickAnimation 0.5s;
}

Here's my component:

...
animated: boolean = false;

clickMe() {
  this.animated = true;
}

This only works on the very first click, which makes sense because my animated variable never gets set back to false. However, if I set it back to false in clickMe(), the animation wouldn't have time to execute. Maybe this isn't even the right way to implement this. Please advise! Thank you.

Courtney Pattison · Accepted Answer · 2018-11-11 18:58:21Z

1

Add a delay to setting the animated variable to false.

clickMe() {
  this.animated = true;
  delay(500).then(() => this.animated = false);
}

async function delay(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

answered Nov 11, 2018 at 18:58

Courtney Pattison

1,6062 gold badges21 silver badges28 bronze badges

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

1 Comment

Frank N Over a year ago

Turning this into a directive would be nice, no? (to avoid having to deal with an otherwise rather useless state variable redundandly on every occasion)

micflan · Accepted Answer · 2017-07-04 23:11:16Z

0

You can toggle a boolean (true/false) value by appending a !

animated: boolean = false;

clickMe() {
  this.animated = !this.animated;
}

answered Jul 4, 2017 at 23:11

micflan

17310 bronze badges

Collectives™ on Stack Overflow

Angular 2 button click animation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related