如何在数组插入Angular上为元素设置动画？

Question

我是角度动画的真正新手，直到现在我才使用过简单的过渡。 我认为我正在寻找的东西很简单，但我无法弄清楚我错过了什么。

我在 ngFor 的模板中显示了一个数组。我可以通过简单的按钮单击来插入或删除该数组的元素。现在我从 Angular 文档中获取了一个简单的动画来更改插入或删除元素的不透明度：

trigger(
      'inOutAnimation', 
      [
        transition(
          ':enter', 
          [
            style({ opacity: 0 }),
            animate('1s ease-out', style({ opacity: 1 }))
          ]
        ),
        transition(
          ':leave', 
          [
            style({ opacity: 1 }),
            animate('1s ease-in', style({ opacity: 0 }))
          ]
        )
      ]
    )

我现在需要的是创建一个动画来将周围的元素移动到页面上的新位置。我不希望现有元素只是突然出现在他们的新位置上。 我怎样才能做到这一点 ？因为看起来触发器inOutAnimation 只针对添加或删除的元素。如何管理其他数组元素的转换？ 此外，我总是在具有已知初始和最终位置的元素上使用移动过渡。现在有了一个数组，元素的位置是动态的。

您的帮助将不胜感激

编辑：

https://stackblitz.com/edit/angular-szt5hm

在这个例子中，当我点击 Add 时，我希望 div 3 滑动/移动到 4 的位置，而不是仅仅弹出。 4 到 5 等相同。

Answer 1

您可以使用keyframes 定义类似于CSS 的动画。试试下面的

控制器

import { Component } from '@angular/core';
import { state, keyframes, style, animate, trigger, transition } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger("inOutAnimation", [
      state("in", style({ opacity: 1 })),
      transition(":enter", [
        animate(
          300,
          keyframes([
            style({ opacity: 0, offset: 0 }),
            style({ opacity: 0.25, offset: 0.25 }),
            style({ opacity: 0.5, offset: 0.5 }),
            style({ opacity: 0.75, offset: 0.75 }),
            style({ opacity: 1, offset: 1 }),
          ])
        )
      ]),
      transition(":leave", [
        animate(
          300,
          keyframes([
            style({ opacity: 1, offset: 0 }),
            style({ opacity: 0.75, offset: 0.25 }),
            style({ opacity: 0.5, offset: 0.5 }),
            style({ opacity: 0.25, offset: 0.75 }),
            style({ opacity: 0, offset: 1 }),
          ])
        )
      ])
    ])
  ]
})
export class AppComponent  {
  elements = [
    { value: 1, background: 'green' },
    { value: 2, background: 'red' },
    { value: 3, background: 'blue' },
    { value: 4, background: 'yellow' },
    { value: 5, background: 'pink' }
  ]

  add() {
    this.elements.splice(2, 0, { value: 6, background: 'violet' });
  }

  remove() {
    this.elements.splice(2, 1);
  }
}

模板

<div class="container">
    <div [@inOutAnimation]="'in'" *ngFor="let element of elements" [ngStyle]="{ 'background-color': element.background }">
        {{ element.value }}
    </div>
</div>
<button (click)="add()">Add</button>
<button (click)="remove()">Remove</button>

动画需要绑定到带有*ngFor的元素才能使用:enter和:leave。

我已经修改了你的Stackblitz。