Item does not animate

I am trying to animate items list when removed… I have embedded state in the response of the list… I also found that * => void does not work… so I rearranged the code as following


  animations: [
     trigger('listItemState', [
        state('in', style({opacity: 1, height:'*', minHeight: '*'})),
        state('out', style({opacity: 0, height: '1px', minHeight: '1px;'})),
        transition('in => out', animate('0.25s 10 ease-out'))

and this is part of the html [@listItemState]="job.state" *ngFor="let job of jobsList; let i = index;"
the job.state is embedded as I said and holds value in

In the function remove at .ts:

  remove(i) {
      job.state = job.state === 'in' ? 'out' : 'in';
      this.jobsList.splice(i , 1);

I have done similar with an accordion list and its working… but I can’t figure out why this does not work!

What environment are you testing in?

Ionic 3.6.0 the latest, angular 4… I have done similar thing with an Accordion list and it working… but im not sure why this one didn’t work.

No, what device are you testing on?

I test on android… but I have not tested this yet on device, only in console… the project is for both android and ios

Be sure to put the trigger in a div that wraps the Ionic component, not the Ionic component itself.

<div [@triggerGoesHere]="stateVariable">

Ionic components aren’t HTML; they get compiled into HTML.

Edit: Also, I wouldn’t put a trigger in the same component as an ngFor.

hmm it didn’t work… have you tested it, I’m suspecting that the code doesn’t work… the original code found here:
I adapted the above code from that plunker

I haven’t tested your code, but I have several animations that work both in the desktop and on devices.