angular - 当模型(文本)更改时，如何为Angular2中的元素设置动画

Question

每当文本在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.中的示例)

但是，在此之前，我只想看看这是否可行。我是动画制作的新手，所以也许我是对的吗？

是否可以这样做，如果可以，怎么做？

任何帮助，不胜感激!

[更新]

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

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

第一次添加该元素时，我看到上面的动画translateX发生了，但是进入了状态，即 item.name.description更改了，div直接拍摄到translateX(100％)，然后又回到了没有动画的translationX(0) 100％)，因此仍然不太正确。

[UPDATE2]

我发现有些事越来越近了..

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

添加 void => *状态和过渡会停止在首次添加该元素时发生动画。现在仅当文本是 且其初始值第一次更改为时才设置动画，但随后的任何时间都没有，因此仍然不正确。

Answer 1

这是我的工作。
每次更改值时都会发生动画，但每次创建时都不会发生动画。您可以根据需要添加任意多个style项。偏移量是动画持续时间的百分比。在下面的示例中，背景和文本的颜色立即变为黄色和红色，然后慢慢退回到以前的颜色。

    trigger(
    'valueChanged',
    [
        transition('void => *', []),   // when the item is created
        transition('* => void', []),   // when the item is removed
        transition('* => *', [         // when the item is changed
            animate(1200, keyframes([  // animate for 1200 ms
                style ({ background : '#FFD900', color: '#FF5500', offset: 0.0 }),
                style ({ background : 'inherit', color: 'inherit', offset: 1.0 }),
            ])),
        ]),
    ]),

HTML代码:

        <div [@valueChanged]="onCount">
            {{onCount}}
        </div>