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

Question

我是 Angular 动画的真正新手，直到现在，除了简单的过渡之外，我从未使用过其他任何东西。
我认为我正在寻找的东西非常简单，但我无法弄清楚我错过了什么。

我在模板中使用 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

在此示例中，我希望当我单击“添加”时，div 3 会滑动/移动到 4 的位置，而不仅仅是弹出。 4 到 5 等相同。

Answer 1

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

Controller

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>

动画需要绑定(bind)到带有 *ngFor 的元素上使用 :enter和 :leave .

我已经修改了你的 Stackblitz .