html
typescript
import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css'],
animations: [
trigger('myAnimation', [
state('fadeIn', style({ opacity: 1 })),
state('fadeOut', style({ opacity: 0 })),
transition('fadeIn => fadeOut', animate('1s')),
transition('fadeOut => fadeIn', animate('1s'))
])
]
})
export class MyComponent {
state = 'fadeIn';
toggleState() {
this.state = this.state === 'fadeIn' ? 'fadeOut' : 'fadeIn';
}
}
