[英]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 {}
}
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.我需要这方面的解决方案。
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您必须使用传递给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.