簡體   English   中英

為什么每當我在我的 angular component.ts 上啟用旋轉動畫時,我的應用程序就會變成空白?

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

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

    
}

每次我添加此動畫時,整個應用程序都會變為空白。 動畫應該在幻燈片菜單狀態下觸發。 我需要這方面的解決方案。

您必須使用傳遞給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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM