Which @angular/* package(s) are relevant/related to the feature request?

No response

Description

animate.leave is strict in that leave animations only happen on the node being removed. No animations are triggered for elements that are children of the node being removed. Many users are confused by this, since it's common to write something like the following:

@if (show) {
  <div class="wrapper-for-flexbox">
    <div class="item" animate.leave="fade">...</div>
  </div>
}

However this doesn't work, because the wrapper-for-flexbox div is the node being removed. It would be nice to have child animations be triggered in this case.

However we don't want every child animation under every node to trigger animations. This is too global and results in a queue of child animations firing on any route navigation. We'll want to scope this behavior, likely to the component template.

Proposed solution

As mentioned in the description, have child animations fire scoped within the template of the component being removed, and do not cross component boundaries.

Alternatives considered

Leave the animation behavior as strict as it is.