Consider the following animation:

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

Here, the :leave selector affects all leaving views down the tree. This means that any time I *ngIf something out, this animation will apply (In this case, every *ngIf’d element will continue to stay on the screen for 0.5s).

The following DomTree’s would both be valid with the above animation

div @animation="state" (Animation Element, this is where the animation is applied)
+-- div *ngIf="true=>false" (this element is leaving)

AND

div @animation="state" (Animation Element, this is where the animation is applied)
+-- div
    +-- div
        +-- label *ngIf="true=>false" (this element is leaving)
            +-- input

I am wondering if it is possible to only query elements that are only direct children (not grandchildren, or great-grandchildren) to the animating element, specifically I want to find direct children that are tagged by :leave

If I try something like :self > :leave and :self :leave for the query, I get an error: DOMException: Failed to execute 'querySelectorAll' on 'Element': ':self > .ng-leave7' is not a valid selector.