AnimationTrigger для создания сложных анимаций
В Angular AnimationTrigger управляет анимациями компонентов, задавая состояния, их изменения и связывая анимации с событиями.
Пример:
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-animated',
template: <div [@fadeInOut]="isVisible ? 'visible' : 'hidden'" class="box"></div> <button (click)="toggle()">Toggle</button> ,
animations: [
trigger('fadeInOut', [
state('visible', style({ opacity: 1 })),
state('hidden', style({ opacity: 0 })),
transition('hidden => visible', [animate('500ms ease-in')]),
transition('visible => hidden', [animate('300ms ease-out')]),
]),
],
styles: [.box { width: 100px; height: 100px; background: lightblue; margin: 10px; }],
})
export class AnimatedComponent {
isVisible = false;
toggle() {
this.isVisible = !this.isVisible;
}
}
👉 @sWebDev