Html 如何在angular ngFor中执行动画序列 背景

嘿，我目前正在尝试使用角度动画为svg制作动画，它有几个路径，将来可能会更改，甚至会从服务中动态更新，所以我列出了所有路径，并添加到我的类型脚本中，使用ngFor在HTML中逐个添加它们。每条路径代表一个字母

问题 我需要向svg添加两个动画

• 将它们冲进冲出，并用颜色填充它们
• 在第一个动画结束后，使其中一条路径沿对角线连续不间断地移动。 这些任务中的每一项我都是单独完成的，并且按照预期工作得很好，甚至连在一起都是按照预期工作的，只是我不能让第二个动画无休止地继续下去

我已经尝试和做了什么

• 我尝试添加两个触发器，一个用于整个路径列表，另一个用于我要移动的一条路径，但结果是只显示该路径，而不显示任何其他路径

常量listAnimation=触发器（'listAnimation'[
转换（'**'[
查询（“：输入”，
[ 
风格({
“笔划偏移量”：“647”，
填写：“ff000000”
}),
错开（'60ms'，
设置动画（'4500ms减缓'，
样式（{'stroke-dashoffset'：“0”，填充：'green'}）
)
)
]
),
查询（“#p2”，
[ 
风格({
转换：“转换（0px，0px）”
}),
错开（'60ms'，
设置动画（“1500ms放松”，
样式（{transform:'translate（-25px，-25px）}）
)
)
]
)
])
]);

HTML

• 我尝试使用标志来指示动画的结束和开始，但结果是启动了整个序列，而不仅仅是移动部分

我想要什么和期望什么 任何一种方式，让我做上述两个动画后，对方和重复第二个不断

代码 这是我迄今为止所做的代码，请随意编辑

• 注意：在铬上效果最好

---

结果表明，我所需要做的就是添加我在“组”中所做的两个查询*，使其相互并行。 或者只需在包含“svg和path”的div上创建一个新触发器，然后在第一个动画之后创建一个新的动画常量调用它，这将使它一个接一个地发生” 至于无止境循环，所有的都是在动画结束时调用一个函数，这将导致改变状态，从而再次重新启动动画，依此类推