Angular动画Query选择器的动画顺序控制方法咨询

嘿，我来帮你拆解这个问题，搞清楚Angular动画里query和stagger是怎么控制顺序的！

你当前代码的动画顺序 #

首先，Angular的query方法会严格按照你写的选择器列表顺序去匹配DOM元素，然后stagger会基于这个匹配顺序来依次添加动画延迟。

你现在写的选择器是#next-slide, #active-slide, #previous-slide，所以动画触发顺序是：

• 第一步：立刻执行#next-slide的动画（没有延迟）
• 第二步：等待150ms后，执行#active-slide的动画
• 第三步：再等待150ms（总共延迟300ms）后，执行#previous-slide的动画

简单说，就是完全跟着你在query里写的选择器顺序走，stagger只是给每个后续元素加固定延迟。

如何修改动画顺序 #

想要调整动画触发顺序，核心就是修改query里选择器的排列顺序——因为stagger的延迟是绑定在query匹配到的元素顺序上的。

举个例子，如果你希望动画顺序是#active-slide先动，然后是#next-slide，最后是#previous-slide，只需要把query的选择器改成：

query('#active-slide, #next-slide, #previous-slide', [
  style({ transform: 'translateX(0)', opacity: 1 }),
  stagger(150, [
    animate('0.6s cubic-bezier(0.215, 0.61, 0.355, 1)', style({ transform: 'translateX(100%)', opacity: 0 }))
  ])
])

如果想要反向（比如#previous-slide先动，然后#active-slide，最后#next-slide），就把选择器顺序改成#previous-slide, #active-slide, #next-slide就行。

补充小提示 #

• 如果你用的是类选择器（比如.slide）而不是ID，query会按照DOM中的出现顺序来匹配元素，这时候如果想自定义顺序，就需要像你现在这样，用明确的选择器列表来指定顺序，而不是依赖DOM顺序。
• stagger的延迟值是累加的：第n个元素的延迟是(n-1)*stagger值，比如你设置150ms，第三个元素就会延迟300ms才开始动画。

内容的提问来源于stack exchange，提问作者Motassem Jalal