Item does not animate

Ionic Framework ionic-v3
1

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

.ts

  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!

2

What environment are you testing in?

3

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. https://stackoverflow.com/a/45659417/7266219

4

No, what device are you testing on?

5

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

6

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

<div [@triggerGoesHere]="stateVariable">
  <ion-item></ion-item>
</div>

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.

7

hmm it didn’t work… have you tested it, I’m suspecting that the code doesn’t work… the original code found here: http://plnkr.co/edit/VbkN9g?p=preview
I adapted the above code from that plunker

8

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