Why is it that whenever i enable a rotate animation on my angular component.ts my application becomes blank?

Question

<button  [@trigger]="menuState" class="text-white font-bold cursor-pointer text-3xl leading-none px-3 py-1 border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none ml-24 md:ml-96" type="button" id="menu" (click)="toggleMenu()">
            &#9776;
</button>

<!--component.ts--> 

import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss'],
  animations: [
    trigger('rotate', [
      animate('1000ms',
      keyframes([
        style({transform: 'rotate(0deg)', offset: '0'}),
        style({transform: 'rotate(2turn)', offset: '1'})
      ])
     )
    ])
  ]
})
export class NavbarComponent implements OnInit {
    menuState: string = 'out';
    toggleMenu() {
        this.menuState = this.menuState === 'out' ? 'in' : 'out';
    }

    constructor() {}

    ngOnInit(): void {}

    
}

Each time i add this animation the entire app goes blank. The animation is supposed to trigger on the slide menu state. I need solutions on this please.

Answer 1

You have to use the name passed to trigger as the trigger name in your template, what you currently have for the trigger name is @trigger which doesn't exist in your animation specification, you have to change @trigger to @rotate , your app goes blank because when Angular tries to trigger the animation but it can't find the animation specification with name @trigger , so the app crashes, so change your template to this

<button  [@rotate]="menuState" class="text-white font-bold cursor-pointer text-3xl leading-none px-3 py-1 border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none ml-24 md:ml-96" type="button" id="menu" (click)="toggleMenu()">
            &#9776;
</button>