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