The animations docs need to be improved regarding elements entering and leaving (`:enter`, `:leave`)

Issue Description

Currently the animations documentation doesn’t specify clearly what elements are animatable via :enter and :leave

As far as I can tell the only text saying something of that sort is this: https://angular.io/guide/transition-and-triggers#use-of-ngif-and-ngfor-with-enter-and-leave which I believe it’s vague at best 😓

Not even the query api docs, nor the transition api docs say anything about the restrictions/rules around entering/leaving elements

Contex

This has lead to misunderstanding and issues being opened (such as #30477)

Related to this, not even the animations live example works smoothly as it doesn’t seem to take this aspect into account (for example try to navigate from Filter/Stagger to Open/Close, you will see that the yellow box’s animation doesn’t get triggered as you’d expect it to)

Solution

The documentations should be improved and should make very clear what :enter and :leave applies to

Relevant points

• the only elements considering by :enter and :leave are host elements and elements with structural directives
• query is clearly being effected (as you can see in the discussion in #30477), I think that transition could be the same, other animation’s api functions could also be affected by this so this should be investigated I believe
• both the api docs and the animation guides should make clear what elements are considered as entering/leaving
• the animations live example should be improved so that it works more smoothly/correctly and it also exemplifies the entering/leaving nuances (suggestion: with the live example’s improvement, a docregion can be added with a section in the animations guide showcasing how to properly query entering elements, especially during routing)

TODOs

• improve the query api docs with the entering/leaving elements information
• improve the transition api docs with the entering/leaving elements information
• improve the animations live examples (in regards to entering/leaving elements)
• improve the general animations guide with the entering/leaving elements information

[dario-piotrowicz]

@petebacondarwin I would love to take this one on, could I be assigned to it? 🙇 🙏

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}