How do you trigger an animation?

Angular provides a trigger() function for animation in order to collect the states and transitions with a specific animation name, so that you can attach it to the triggering element in the HTML template. This function watch for changes and trigger initiates the actions when a change occurs. For example, let's create trigger named upDown, and attach it to the button element.

selector: 'app-up-down',
animations: [
trigger('upDown', [
state('up', style({
height: '200px',
opacity: 1,
backgroundColor: 'yellow'
state('down', style({
height: '100px',
opacity: 0.5,
backgroundColor: 'green'
transition('up => down', [
transition('down => up', [
templateUrl: 'up-down.component.html',
styleUrls: ['up-down.component.css']
export class UpDownComponent {
isUp = true;
toggle() {
this.isUp = !this.isUp;

May 19, 2022