Angular - restart animation by event

Question

I'm trying to implement animation restart on click event: https://stackblitz.com/edit/angular-ivy-rwa4ze?file=src/app/app.component.ts.

There's no problem in example above, but I would like to have a solution without setTimeout as it looks like kludge for this task, can I achieve this with some another approach? Tried to use CSS animations but still had to use setTimeout.

score 0 · Accepted Answer · answered Sep 20 '22 at 22:02

you can do with css animations.

.css :

@keyframes anim {
  from { background-color: red; }
  to { background-color: ''; }
}
.color-animation {
  animation-name: anim;
  animation-duration: 1s;
}

.html :

<div #textContainer (click)="launchAnim(textContainer)">
  <p>Click me!</p>
</div>

.ts :

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  public launchAnim(textContainer: HTMLDivElement) {
    textContainer.classList.toggle('color-animation');
    textContainer.offsetHeight; // force DOM reflow
    textContainer.className = 'color-animation';
  }
}

For more information about DOM reflow see here

Angular - restart animation by event

1 Answers1