docs(animations): improve aio animations guides info around :enter/:leave (#44550)

improve the aio animations guide information around elements entering and
leaving, this includes, querying them, their transitions and also improvements
to the animations guide live examples

PR Close #44550

aio/content/guide/complex-animation-sequences.md

@@ -20,11 +20,34 @@ The functions that control complex animation sequences are:
 
 {@a complex-sequence}
 
+## The query() function
+
+Most complex animations rely on the `query()` function to find child elements and apply animations to them, basic examples of such are:
+ - `query()` followed by `animate()`
+  used to query simple HTML elements and directly apply animations to them.
+ - `query()` followed by `animateChild()`
+  used to query child elements which themselves have animations metadata applied to them and trigger such animation (which would be otherwise be blocked by the current/parent element's animation)
+
+The first argument of `query()` is a [css selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) string which can also contain the following angular-specific tokens:
+ - `:enter`/`:leave` for entering/leaving elements
+ - `:animating` for elements currently animating
+ - `@*`/`@triggerName` for elements with any or a specific trigger
+ - `:self` the animating element itself
+
+<div class="callout is-helpful">
+
+  <header>Entering and Leaving Elements</header>
+
+  Not all child elements are actually considered as entering/leaving, this can at times be counterintuitive and confusing, please see the [query api docs](/api/animations/query#entering-and-leaving-elements) for more information.
+
+
+  You can also see an illustration of this in the animations live example (introduced in the animations [introduction section](/guide/animations#about-this-guide)) under the Querying tab.
+
+</div>
+
 ## Animate multiple elements using query() and stagger() functions
 
-The `query()` function lets you find inner elements within the element that is being animated. This function targets specific HTML elements within a parent component and applies animations to each element individually. Angular intelligently handles setup, teardown, and cleanup as it coordinates the elements across the page.
-
-The `stagger()` function lets you define a timing gap between each queried item that is animated and thus animates elements with a delay between them.
+After having queried child elements via `query()`, the `stagger()` function lets you define a timing gap between each queried item that is animated and thus animates elements with a delay between them.
 
 The following example demonstrates how to use the `query()` and `stagger()` functions to animate a list (of heroes) adding each in sequence, with a slight delay, from top to bottom.
 

aio/content/guide/transition-and-triggers.md

@@ -75,12 +75,6 @@ Combine wildcard and void states in a transition to trigger animations that ente
 
 This section shows how to animate elements entering or leaving a page.
 
-<div class="alert is-helpful">
-
-**Note:** For this example, an element entering or leaving a view is equivalent to being inserted or removed from the DOM.
-
-</div>
-
 Add a new behavior:
 
 * When you add a hero to the list of heroes, it appears to fly onto the page from the left.
@@ -109,6 +103,12 @@ So, use the aliases `:enter` and `:leave` to target HTML elements that are inser
 
 The `:enter` transition runs when any `*ngIf` or `*ngFor` views are placed on the page, and `:leave` runs when those views are removed from the page.
 
+<div class="alert is-important">
+
+  **Note:** Entering/leaving behaviors can sometime be confusing. As a rule of thumb consider that any element being added to the DOM by Angular passes via the `:enter` transition, but only elements being directly removed from the DOM by Angular pass via the `:leave` transition (e.g. an element's view is removed from the DOM because its parent is being removed from the DOM or the app's route has changed, then the element will not pass via the `:leave` transition).
+
+</div>
+
 This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`. The HTML template contains the following code.
 
 <code-example path="animations/src/app/insert-remove.component.html" header="src/app/insert-remove.component.html" region="insert-remove" language="typescript">