每当文本在我的Ionic 2（Angular 2）项目中发生变化时，我都会尝试为值设置动画 . 这是在Ionic2项目中，但对于任何Angular2都应该是相同的 .

我在标记中有以下内容..

<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>

以及组件中的以下触发器..

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'))
   ])

我只是在这里使用颜色来测试，最终我希望它改变颜色（然后改回），或者可能有旧的值"flyout"和新的"flyin"（类似于Angular documentation.中的示例）

但是，在此之前，我只是想看看这是否可行 . 我是动画片的新手，所以也许我正好偏离轨道？

有可能这样做，如果是这样的话怎么样？

任何帮助非常感谢！

[UPDATE]

我已经接近以下内容，使用translateX fot测试而不是颜色变化（因为它更容易看到）...

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%)'  }))
    ])
   ]),

添加 void => * 状态和转换会停止首次添加元素时发生的动画 . 现在只有当文本 first 从其初始值 but not any subsequent times 更改时才动画，因此仍然不正确 .

angular ionic2