<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()"> ☰ </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 {} }Cada vez que agrego esta animación, toda la aplicación se queda en blanco. Se supone que la animación se activa en el estado del menú deslizante. Necesito soluciones en esto por favor.
Tiene que usar el nombre pasado para trigger como el nombre del disparador en su plantilla, lo que tiene actualmente para el nombre del disparador es @trigger que no existe en su especificación de animación, tiene que cambiar @trigger a @rotate , su aplicación se queda en blanco porque cuando Angular intenta activar la animación, pero no puede encontrar la especificación de animación con el nombre @trigger , por lo que la aplicación falla, así que cambie su plantilla a esta
<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()"> ☰ </button>