fix(animations): ensure final state() styles are applied within @.disabled animations (#20267)

Closes #20266

PR Close #20267

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

@@ -1047,6 +1047,7 @@ export class TransitionAnimationEngine {
       // means that it is independent and therefore should be set for animation
       if (subTimelines.has(element)) {
         if (disabledElementsSet.has(element)) {
+          player.onDestroy(() => setStyles(element, instruction.toStyles));
           skippedPlayers.push(player);
           return;
         }

packages/core/test/animation/animation_integration_spec.ts

@@ -2618,6 +2618,57 @@ export function main() {
           expect(players[0].totalTime).toEqual(1234);
         });
 
+        it('should ensure state() values are applied when an animation is disabled', () => {
+          @Component({
+            selector: 'if-cmp',
+            template: `
+              <div [@.disabled]="disableExp">
+                <div [@myAnimation]="exp" #elm></div>
+              </div>
+            `,
+            animations: [
+              trigger(
+                  'myAnimation',
+                  [
+                    state('1', style({height: '100px'})), state('2', style({height: '200px'})),
+                    state('3', style({height: '300px'})), transition('* => *', animate(500))
+                  ]),
+            ]
+          })
+          class Cmp {
+            exp: any = false;
+            disableExp = false;
+
+            @ViewChild('elm') public element: any;
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+
+          const fixture = TestBed.createComponent(Cmp);
+          const engine = TestBed.get(ɵAnimationEngine);
+
+          function assertHeight(element: any, height: string) {
+            expect(element.style['height']).toEqual(height);
+          }
+
+          const cmp = fixture.componentInstance;
+          const element = cmp.element.nativeElement;
+          fixture.detectChanges();
+
+          cmp.disableExp = true;
+          cmp.exp = '1';
+          fixture.detectChanges();
+          assertHeight(element, '100px');
+
+          cmp.exp = '2';
+          fixture.detectChanges();
+          assertHeight(element, '200px');
+
+          cmp.exp = '3';
+          fixture.detectChanges();
+          assertHeight(element, '300px');
+        });
+
         it('should disable animations for the element that they are disabled on', () => {
           @Component({
             selector: 'if-cmp',