fix(animations): ensure animations are disabled on the element containing the @.disabled flag (#18714)

Prior to fix this fix, @.disabled would only work to disable child
animations. Now it will also disable animations for the element that has
the @.disabled flag (which makes more sense).

PR Close #18714

packages/animations/browser/src/render/transition_animation_engine.ts

@@ -817,6 +817,7 @@ export class TransitionAnimationEngine {
 
     const disabledElementsSet = new Set<any>();
     this.disabledNodes.forEach(node => {
+      disabledElementsSet.add(node);
       const nodesThatAreDisabled = this.driver.query(node, QUEUED_SELECTOR, true);
       for (let i = 0; i < nodesThatAreDisabled.length; i++) {
         disabledElementsSet.add(nodesThatAreDisabled[i]);

packages/animations/src/animation_metadata.ts

@@ -282,11 +282,12 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
  * <div [@myAnimationTrigger]="myStatusExp">...</div>
  * ```
  *
- * ## Disable Child Animations
+ * ## Disable Animations
  * A special animation control binding called `@.disabled` can be placed on an element which will
- then disable animations for any inner animation triggers situated within the element.
+ then disable animations for any inner animation triggers situated within the element as well as
+ any animations on the element itself.
  *
- * When true, the `@.disabled` binding will prevent inner animations from rendering. The example
+ * When true, the `@.disabled` binding will prevent all animations from rendering. The example
  below shows how to use this feature:
  *
  * ```ts
@@ -312,8 +313,8 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
  * The `@childAnimation` trigger will not animate because `@.disabled` prevents it from happening
  (when true).
  *
- * Note that `@.disbled` will only disable inner animations (any animations running on the same
- element will not be disabled).
+ * Note that `@.disbled` will only disable all animations (this means any animations running on
+ * the same element will also be disabled).
  *
  * ### Disabling Animations Application-wide
  * When an area of the template is set to have animations disabled, **all** inner components will

packages/core/test/animation/animation_integration_spec.ts

@@ -2441,7 +2441,7 @@ export function main() {
           expect(players[0].totalTime).toEqual(1234);
         });
 
-        it('should not disable animations for the element that they are disabled on', () => {
+        it('should disable animations for the element that they are disabled on', () => {
           @Component({
             selector: 'if-cmp',
             template: `
@@ -2476,8 +2476,7 @@ export function main() {
           fixture.detectChanges();
 
           let players = getLog();
-          expect(players.length).toEqual(1);
-          expect(players[0].totalTime).toEqual(1234);
+          expect(players.length).toEqual(0);
           resetLog();
 
           cmp.disableExp = false;