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

如何使用索引来应用这个动画（基本上我不是专注于动画本身所以我会应用一个简单的红色），所以，我可以显示新添加的数组元素。

编辑：解决方案

我找到了自己的解决方案，并获得动画from this post here。

解决方案是，通过简单地添加触发器的属性作为将其添加到另一个元素中，动画可以正常应用于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>

Here is a plunker

Angular 4为新添加的数组元素设置动画

0 个答案: