CSS animations emit events that we can listen to using Javascript. There are slight differences in how we attach event listeners between a vanilla project and an Angular project. Let's start with the list of available events.
-
animationstart
- Emitted when the animation starts -
animationend
- Emitted when the animation completes -
animationiteration
- Emitted when an iteration of animation ends and another one begins. This event only fires for then - 1
iteration - the last iteration of animation will fire theanimationend
event instead.
Notice that the event names are all in lowercase and not camel-case
General Usage
To listen to these events, we will need to attach an event listener to the element with the transition using addEventListener
. addEventListener
is a global event listener not specific to just animations or transitions. We can then pass any of the events from the list of available events to listen to any of them.
Approach 1: Using addEventListener
The regular Javascript approach functions the same way in an Angular project. The only difference between their usage is how Angular accesses the target element. Instead of accessing the target element using getViewById
, we can use Angular's ViewChild
decorator.
<!-- src/app/app.component.html -->
<div #targetElement></div>
// src/app/app.component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
@ViewChild('targetElement') targetElement: targetElement;
}
After getting the reference to the target element, we can attach an event listener using the addEventListener
function.
// src/app/app.component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
@ViewChild('targetElement') targetElement: ElementRef;
ngAfterViewInit(): void {
this.listenToAnimationStart();
this.listenToAnimationEnd();
this.listenToAnimationIteration();
}
ngOnDestroy(): void {
this.targetElement.nativeElement.removeEventListener('animationstart');
this.targetElement.nativeElement.removeEventListener('animationend');
this.targetElement.nativeElement.removeEventListener('animationiteration');
}
listenToAnimationStart(): void {
this.targetElement.nativeElement.addEventListener('animationstart', () => {
console.log('animation started');
})
}
listenToAnimationEnd(): void {
this.targetElement.nativeElement.addEventListener('animationend', () => {
console.log('animation ended');
})
}
listenToAnimationIteration(): void {
this.targetElement.nativeElement.addEventListener('animationiteration', () => {
console.log('animation iteration');
})
}
}
With this approach, we would also need to make sure that we are cleaning up the event listeners after the component is destroyed to avoid memory leaks (See ngOnDestroy
in the code above).
Approach 2: Using Angular's event listener
Angular also let us handle these types of events directly in our template. This reduces the amount of boilerplate and manual clean-up that we would need to do.
Let's convert the event listener from the previous approach. Instead of giving the element an id, we'll directly add the event names enclosed in parentheses and bind it to a function that will be called when the event is fired.
<!-- src/app/app.component.html -->
<div
(animationstart)="onAnimationStart()"
(animationend)="onAnimationEnd()"
(animationiteration)="onAnimationInteration()"
></div>
In our component file, add the onAnimationStart
, onAnimationEnd
, and onAnimationInteration
functions.
// src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
onAnimationStart(): void {
console.log('animation started');
}
onAnimationEnd(): void {
console.log('animation ended');
}
onAnimationInteration(): void {
console.log('animation iteration');
}
}
Wrapping Up
Both approaches have their pros and cons. Although the first approach (addEventListener
) is more verbose, it does come with some additional functionalities by letting us pass options to configure how the event listener works. It provides more control of the phase when the listener is activated. This combined with rxjs observables gives us even more control if we need to combine multiple event sources.
If you are interested in more content like this or have any questions, let me know in the comments or tweet me at @williamjuan27
Top comments (0)