淡入并推入底部动画

Question

每当我按下按钮时，我都会尝试为div设置动画。

我有一个字符串列表：

this.list = [
"Element 1",
"Element 2",
"Element 3
];

以这种方式呈现：

 <span style="cursor: pointer;" (click)="add()">Add item</span>
    <div class="wrp"  [@fadeInOut]>
        <div class="si" *ngFor="let item of list">{{item}}</div>
    </div>

add函数：

this.list.push("Element 4");

动画：

animations: [
    trigger('fadeInOut', [
      transition(':enter', [   // :enter is alias to 'void => *'
        style({opacity:0}),
        animate(500, style({opacity:1})) 
      ]),
      transition(':leave', [   // :leave is alias to '* => void'
        animate(500, style({opacity:0})) 
      ])
    ])
  ]

我想做的是实现此动画：

当我向该列表中添加新项目时，该列表会被下推，然后新元素“淡入”从左到右。

有人可以帮我吗？如果有一种方法可以通过scss做到这一点。

问题也在这里：Angular2 *ngFor animation of pushed away elements

但是该示例不再起作用。

Answer 1

进行一些小的更改对我来说很好。

动画

animations: [
    trigger('fadeInOut', [
      transition(':increment', [
        query(':enter', [
          style({ opacity: 0 }),
          animate('500ms', style({ opacity: 1 })),
        ])
      ]),
      transition(':decrement', [
        query(':leave', [
          animate('500ms', style({ opacity: 0 })),
        ])
      ]),
    ])
  ]

组件：

export class AppComponent {
  list = [
    "Element 1",
    "Element 2",
    "Element 3"
  ];
  itemsTotal = 3;

  add(): void {
    this.list.splice(0, 0, "Element 4")
    this.itemsTotal++;
  }
}

html：

<div class="wrp" [@fadeInOut]="itemsTotal">
  <div class="si" *ngFor="let item of list">{{item}}</div>
</div>