How can I apply same animation for list of html elements one by one with angular 4 animation? -

i'm trying apply angular 4 animation list of html elements

facilities = ['<p> <span class="glyphicon glyphicon-hand-right"> </span> text 1</p>',         '<p> <span class="glyphicon glyphicon-hand-right"></span>text 2</p>',         '<p> <span class="glyphicon glyphicon-hand-right"></span> text 3</p>',         '<p> <span class="glyphicon glyphicon-hand-right"></span> text 4</p>', ]; 

one 1 below code:

animations: [   trigger('flyinout', [     state('in', style({transform: 'translatex(0)'})),     transition('void => *', [       style({transform: 'translatex(-100%)'}),       animate(100)     ]),     transition('* => void', [       animate(100, style({transform: 'translatex(100%)'}))     ])   ]) ] 

when put trigger list elements, elements come 1 screen in 1 go. want make them appear 1 one. fetch text 1 , text 2 on html. how can that?

it can done angular animation callbacks , written in typescript

html:

 <ul>     <li *ngfor="let item of listcopy;" (@flyinout.done)="getnextitem()" [@flyinout]="'in'" >      <ul>         <li *ngfor="let item of list" (@flyinout.done)="getnextitem()" [@flyinout]="'in'" >            <div [innerhtml]="item"></div>         </li>      </ul>            </li>  </ul> 

typescript:

   .....    @component({    ....    animations: [       trigger('flyinout', [         state('in', style({transform: 'translatex(0)'})),         transition('void => *', [           style({transform: 'translatex(-100%)'}),           animate(100)         ]),         transition('* => void', [           animate(100, style({transform: 'translatex(100%)'}))         ])       ])     ]     ....     list = ['item1', 'item2', 'item3', 'item4'];     listcopy = [];      next: number = 0;      constructor(){         this.getnextitem();     }      getnextitem() {         if(this.next < this.list.length) {           this.listcopy.push(this.list[this.next++]);         }     } 

plunker (i put 1000ms emphasise animation)