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都会突出显示.

如何应用这个动画(基本上我不是专注于动画本身所以我将应用一个简单的红色)使用索引,所以,我可以显示新添加的数组元素.

编辑:解决方案

我找到了自己的解决方案,我从这里发了动画.

解决方案是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>

这是一个掠夺者

Answer 1

我使用 RC 5 中的新动画支持从 Angular 2 animate *ngFor 列表项中获取动画。

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>

这是一个笨蛋。

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