I would like to animate an element's DOM insertion/removal, which is triggered by a parent higher up in my component tree, as follows:
<component-A>
<component-B *ngIf="condition">
<component-C>
<div @fadeEnterLeave>animated element</div>
</component-C>
</component-B>
</component-A>
(Note that the components are not "transcluded" (no Content Projection using ng-content); they're just direct and only children in their parent's respective template (minimal reproduction to better illustrate my problem: here))
As is, only the :enter transition is animated, for the component-A's sub-tree instantly disappears when condition is not met, preventing the :leave animation to play.
Now, the angular doc states that:
Each time an animation is triggered in Angular, the parent animation has priority and any child animations are blocked.
So I need to "trickle" the animation down to component-C using the animateChild function:
trigger("cascade", [
transition(":enter, :leave", [query("@*", animateChild())])
])
component-B template:
<component-C @cascade></component-C>
Adding this trigger to component-B (which applies the trigger to the component-C element in its template) yields my expected result: :enter and :leave animations play for component-C's div.
The catch is that, in my case, component-A also registered animations for its template's elements to use, and, for some reason, reusing the @cascade trigger (this one alone, even; no other animations) skips component-C's div animations: the @fadeInOut trigger is called for both states, but the animation is "done" as soon as it starts.
Again, I might not be very clear, but the demo is. Open the console to see the logs of every trigger "start" and "done" timings and order. Spoiler: the trigger events don't "bubble up/down" in the tree order.
I'm surely missing something silly because it must be such a common occurrence to want to animate an element's :enter/:leave far away from its parent's [ngFor] or [ngIf] ?
Thank you for your input!