[英]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()">
☰
</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()">
☰
</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.