如何为Angular动画的:leave和:enter指定子元素层级？

现有如下Angular动画代码：

trigger('routedStepsAnimation', [
    transition('* <=> *', [
        query(':leave', [animate('0.5s cubic-bezier(0.86, 0, 0.07, 1)', style({}))], {
            optional: true,
        }),
    ])
])

当前代码中，:leave选择器会匹配触发动画元素下所有层级的即将离开的DOM元素（比如任何被*ngIf移除的后代元素都会触发这个0.5秒的动画）。

现在需要修改选择器，让动画仅作用于触发动画元素的直接子元素（不包含孙元素、曾孙元素等深层后代）中处于:leave状态的元素。

尝试使用:self > :leave和:self :leave作为查询选择器时，会抛出DOM异常：

DOMException: Failed to execute 'querySelectorAll' on 'Element': ':self > .ng-leave7' is not a valid selector.

解决方案 #

:self并非标准CSS选择器，在Angular动画中它仅能单独使用来指代触发动画的元素本身，不能与子选择器>组合。要匹配触发元素的直接子级离开元素，直接使用'> :leave'作为query的选择器即可：

trigger('routedStepsAnimation', [
    transition('* <=> *', [
        query('> :leave', [animate('0.5s cubic-bezier(0.86, 0, 0.07, 1)', style({}))], {
            optional: true,
        }),
    ])
])

原理说明 #

• '> :leave'是CSS直接子选择器与Angular动画伪类的组合写法
• 它会仅匹配触发动画元素的直接子节点中，处于离开状态（即被*ngIf等指令移除）的元素
• 深层嵌套的后代元素（如孙元素）即使处于:leave状态，也不会被该选择器匹配

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