如何在数组插入时为元素设置动画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。

我修改了你的斯塔克布利茨。