Angular 4：对数组中新添加的元素进行动画处理

Question

我有一个 div，里面显示了一些数组中的值，我可以添加更多。新添加的值将直接添加到div中：

list = ['milk', 'sugar', 'flour'];
    
state = 'normal';

//@ViewChild('f') addForm: NgForm;

onAdd(item)
  {
    this.list.push(item);
    //this.addForm.reset();
  }

我有这个简单的动画：

animations: [
    trigger('divState', [
        state('normal', style({
            backgroundColor: 'red',
            transform: 'translateX(0)'
        })),
        state('highlighted', style({
            backgroundColor: 'blue',
            transform: 'translateX(100px)'
        })),
        transition('normal=>highlighted', animate(300)),
        transition('highlighted=>normal', animate(800))
    ])
  ]

这是应用于 div 元素的，它将被动画化。

我需要做的是给数组中新添加的值应用闪烁的红色颜色，持续几毫秒，就像闪光灯一样。

如果我有以下内容：

牛奶

糖

面粉

然后添加了鸡蛋:

牛奶

糖

面粉

鸡蛋

那么鸡蛋的 div 元素应该闪烁。

我知道我应该使用索引来获取最后添加的索引，并在其上应用动画：

<li 
  class="list-group-item"
  
  *ngFor="let item of list; let i = index" >
  {{ item }}
</li>

我尝试了以下方法：

<li [@divState]="state"
  class="list-group-item"
  
  *ngFor="let item of list; let i = index" >
  {{ item }}
</li>

所以，所有的div都被突出显示。

如何使用索引应用此动画（基本上我不关注动画本身，因此我将对其应用简单的红色），以便我可以展示数组中新添加的元素。

- alim1990

---

可以的，如果您的答案全面且准确，您完全可以编写并接受它。 - Augie Gardner

你能找到解决方案了吗？ - Amit Bisht

是的。新添加的元素将自动进行动画处理。 - alim1990

Answer 1

我从Angular 2 animate *ngFor list item one after other using new Animation support in RC 5获取了动画。

解决方案是，通过将触发器属性添加到另一个元素中，可以将动画正常应用于ngFor的任何元素。

因此，以下是脚本：

animations: [
    trigger('divState', [
      state('in', style({backgroundColor: 'red',transform: 'translateX(0)'})),

      transition('void => *', [
        animate(1000, keyframes([
          style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
          style({backgroundColor: '#bee0ff',opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
          style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
        ]))
      ]),
      transition('* => void', [
        animate(300, keyframes([
          style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
          style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
          style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
        ]))
      ])
    ])
  ]

这里是显示的数组：

<li  [@divState]="state"
   class="list-group-item"
   (click)="onDelete(item)"
   *ngFor="let item of list; let i = index" >
   {{ item }}
</li>

这里是一个 Plunker。

---

_{这个答案是由OP alim1990 在CC BY-SA 3.0下发布的，作为编辑问题Angular 4 Animate the newly added element of an array的回答。}

- vvvvv