为什么每当我在我的 angular component.ts 上启用旋转动画时，我的应用程序就会变成空白？

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 {}

    
}

每次我添加此动画时，整个应用程序都会变为空白。 动画应该在幻灯片菜单状态下触发。 我需要这方面的解决方案。

Answer 1

您必须使用传递给trigger的名称作为模板中的触发器名称，您当前的触发器名称是@trigger ，它在您的动画规范中不存在，您必须将@trigger更改为@rotate ，您的应用程序变为空白，因为当 Angular 尝试触发动画但找不到名称为@trigger的动画规范时，应用程序崩溃，因此将模板更改为此

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