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