淡入和推底动画答案

【问题标题】：Fade in and push bottom animation淡入和推底动画
【发布时间】：2019-04-09 00:31:01
【问题描述】：

每当我按下按钮时，我都会尝试为 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

但该示例不再有效。

【问题讨论】：

标签： angular animation

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

【讨论】：