animate slideinout angular
import { trigger, transition, animate, style } from '@angular/animations'
@Component({
...
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)'}),
animate('200ms ease-in', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
])
])
]
})
// In Template/Html File:::-
<div *ngIf="visible" [@slideInOut]>
This element will slide up and down when the value of
'visible' changes from true to false and vice versa.
</div>