Arrays 如何在阵列插入上设置元素动画？

我是一个真正的角度动画新手，直到现在，我从来没有使用过任何东西，除了简单的过渡。 我想我要找的很简单，但我不知道我错过了什么

我有一个数组显示在模板与ngFor。我可以插入或删除此数组的元素，只需单击一个简单的按钮。现在，我从Angular doc中获取了一个简单的动画，用于更改插入或删除元素的不透明度：

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

只针对添加或删除的元素。如何管理其他数组元素的转换？ 另外，我总是在已知初始和最终位置的元素上使用移动变换。现在，对于数组，元素的位置是动态的

非常感谢你的帮助

编辑：

在本例中，我希望当我单击Add时，Div3滑动/移动到位置4，而不是仅仅弹出。与4到5等相同。

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

控制器

从'@angular/core'导入{Component}；
从“@angular/animations”导入{状态、关键帧、样式、动画、触发器、转换}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
动画：[
触发器（“inOutAnimation”[
状态（“in”，样式（{opacity:1}）），
转换（“：输入”[
生动活泼(
300,
关键帧([
样式（{不透明度：0，偏移量：0}），
样式（{不透明度：0.25，偏移量：0.25}），
样式（{不透明度：0.5，偏移量：0.5}），
样式（{不透明度：0.75，偏移量：0.75}），
样式（{不透明度：1，偏移量：1}），
])
)
]),
过渡（“：离开”[
生动活泼(
300,
关键帧([
样式（{不透明度：1，偏移量：0}），
样式（{不透明度：0.75，偏移量：0.25}），
样式（{不透明度：0.5，偏移量：0.5}），
样式（{不透明度：0.25，偏移量：0.75}），
样式（{不透明度：0，偏移量：1}），
])
)
])
])
]
})
导出类AppComponent{
元素=[
{值：1，背景：“绿色”}，
{值：2，背景：“红色”}，
{值：3，背景：“蓝色”}，
{值：4，背景：“黄色”}，
{值：5，背景：“粉红色”}
]
添加（）{
拼接（2，0，{value:6，背景：'violet'}）；
}
删除（）{
本规范。元件。拼接（2，1）；
}
}

模板

{{element.value}}
添加
去除

需要使用

*ngFor

将动画绑定到元素，以使用

：enter

和

：leave

---

我已经修改了您的。

您能提供一个显示您到底在寻找什么的模板吗？角材料cdk

s

drap and drop`模块在这里帮助您lot@MikeS. stackblitz UpdateThaks为您的答案，但我不知道这如何帮助我设置其他数组元素的动画。受添加或删除影响的其他元素需要移动/滑动到其新位置动画可以简化为：

animations:[trigger（'inOutAnimation'，[state（'in'，style（{opacity:1}））、transition（':enter'，[style（{opacity:'0'}）、animate（'.5s ease out'，style（{opacity:'1}））），过渡（':leave'，[style（{opacity:'1'}），animate（'.5s ease out'，style（{opacity:'0'}））]，]），]