在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"（类似于 "Iron2 "中的例子）。Angular文档。

不过，在此之前，我只想看看这是否可行。我是玩动画的新手，也许我说的不对？

是否可以这样做，如果可以，如何做？

任何帮助非常感谢!

[更新]

我已经接近与以下，使用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 => * 状态和过渡停止了元素第一次被添加时发生的动画。现在，只有当文本被选中时才会出现动画。第一 从它的初始值改变。以后就没有了所以还是不对。

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>