Затухание и толчок нижней анимации

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 * ngДля анимации отталкиваемых элементов

но пример больше не работает.

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>