如何在数组插入角度上设置元素动画？

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

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

Answer 1

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

控制器

keyframes
模板

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({ transform: "translateX(0)" })),
      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。