How to animate an element in Angular2 when changing a model (text)

Question

How to animate an element in Angular2 when changing a model (text)

I am trying to animate the meaning whenever the text changes in my Ionic 2 (Angular 2) project. This is in the Ionic2 project, but should be the same for any Angular2.

The markup has the following.

<ion-list no-lines>
    <ion-item *ngFor="let item of data>
      <ion-card [@flyInOut]='cardState'>
            <ion-card-content>
              <div ><b>{{item.name.description}}</b></div>
              <div [@valueUpdated]='item.lastname.description'>{{item.lastname.description}}</div>
              <div>{{item.value}}</div>
            </ion-card-content>
          </ion-card>

        </ion-item>
 </ion-list>

and the next trigger in the component.

 trigger('valueUpdated',[
        state('void => *',style({
           backgroundColor:'red'
       })),
       state('* => void',style({              
           backgroundColor:'green'
       })),
       transition('active => inactive', animate('100ms ease-in')),
       transition('inactive => active', animate('100ms ease-out'))
   ])

I just use the colors here to test, in the end I would like it to change the color of the change (and then change it back) or perhaps have the old value "pop up" and the new one for "flyin" (similar to the example in the Angular documentation .

However, before that I just want to see if this is possible. I'm new to the game with animation, so maybe I'm right.

Can this be done, and if so, how?

Any help is much appreciated!

[UPDATE]

, translateX, ( )...

trigger('valueUpdated', [   
  state('* => *', style({ transform: 'translateX(0)' })),       
  transition('* => *', [      
    animate(2000, style({ transform: 'translateX(100%)'  }))
  ])
]),

, translateX, , .. item.name.description , div translateX (100%), translateX (0) translateX (100%), .

[UPDATE2]

, - .

 trigger('valueUpdated', [   
    state('void => *', style({ transform: 'translateX(0)' })),       
    transition('void => *', []),
     transition('* => *', [      
       animate(2000, style({ transform: 'translateX(100%)'  }))
    ])
   ]),