1<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>
2
1import { trigger, transition, animate, style } from '@angular/animations'
2
3@Component({
4 ...
5 animations: [
6 trigger('slideInOut', [
7 transition(':enter', [
8 style({transform: 'translateY(-100%)'}),
9 animate('200ms ease-in', style({transform: 'translateY(0%)'}))
10 ]),
11 transition(':leave', [
12 animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
13 ])
14 ])
15 ]
16})
17