我想为s.th.制作动画片。使用Angulars动画模块或CSS
我的组件中有一张动态的卡片列表。 这些卡应该交换，具体取决于数组包含它们的方式。 按钮可以更改数组内容（更改元素的顺序）。
Angular Animations主要使用轻松/缓出，但在我的情况下，它只是一个位置变化（交换）。 元素应该仍然存在。 这是一个简短的例子来说明我的意思：
[STATE 1]
[--- ELEMENT A ---] [--- ELEMENT Z ---]
[--- ELEMENT B ---] [--- ELEMENT Y ---]
[--- ELEMENT C ---] [--- ELEMENT X ---]
[--- ELEMENT D ---] [--- ELEMENT W ---]
[--- ELEMENT E ---] [--- ELEMENT V ---]
[--- ELEMENT F ---] [--- ELEMENT U ---]
点击一个按钮后，它应该为它的移动方式设置动画。 在此示例中，元素V交换位置与元素A
[STATE 2]
[--- ELEMENT V ---] [--- ELEMENT Z ---]
[--- ELEMENT B ---] [--- ELEMENT Y ---]
[--- ELEMENT C ---] [--- ELEMENT X ---]
[--- ELEMENT D ---] [--- ELEMENT W ---]
[--- ELEMENT E ---] [--- ELEMENT A ---]
[--- ELEMENT F ---] [--- ELEMENT U ---]
有没有一种正确的方法来做角度？ 或者我真的需要与DOM进行交互，以便我可以使用绝对定位和css翻译功能吗？
我已经用stackblitz示例更新了这个问题。
https://stackblitz.com/edit/angular-5mstrg
这可能总结了我面临的问题。我知道我想在TypeScript（数据）中更改哪些元素。
但是对于动画我需要知道它在DOM中的位置（对于translateX-函数）。
我的目标是通过动画看到从Box1到Box2的交换，反之亦然。 （慢慢移动角色）