fix(animations): properly support the query limit option value

Closes #19232

packages/animations/browser/src/dsl/animation_timeline_builder.ts

@@ -556,7 +556,11 @@ export class AnimationTimelineContext {
     }
     if (selector.length > 0) {  // if :self is only used then the selector is empty
       const multi = limit != 1;
-      results.push(...this._driver.query(this.element, selector, multi));
+      let elements = this._driver.query(this.element, selector, multi);
+      if (limit !== 0) {
+        elements = elements.slice(0, limit);
+      }
+      results.push(...elements);
     }
 
     if (!optional && results.length == 0) {

packages/core/test/animation/animation_query_integration_spec.ts

@@ -1713,6 +1713,56 @@ export function main() {
            expect(players[1].element.innerText.trim()).toEqual('5');
            expect(players[2].element.innerText.trim()).toEqual('6');
          });
+
+      describe('options.limit', () => {
+        it('should limit results when a limit value is passed into the query options', () => {
+          @Component({
+            selector: 'cmp',
+            template: `
+             <div [@myAnimation]="exp">
+              <div *ngFor="let item of items" class="item">
+                {{ item }}
+              </div>
+             </div>
+          `,
+            animations: [
+              trigger(
+                  'myAnimation',
+                  [
+                    transition(
+                        '* => go',
+                        [
+                          query(
+                              '.item',
+                              [
+                                style({opacity: 0}),
+                                animate('1s', style({opacity: 1})),
+                              ],
+                              {limit: 2}),
+                        ]),
+                  ]),
+            ]
+          })
+          class Cmp {
+            public exp: any;
+            public items: any[] = [];
+          }
+
+          TestBed.configureTestingModule({declarations: [Cmp]});
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
+          cmp.items = ['a', 'b', 'c', 'd', 'e'];
+          fixture.detectChanges();
+
+          cmp.exp = 'go';
+          fixture.detectChanges();
+
+          const players = getLog() as any[];
+          expect(players.length).toEqual(2);
+          expect(players[0].element.innerText.trim()).toEqual('a');
+          expect(players[1].element.innerText.trim()).toEqual('b');
+        });
+      });
     });
 
     describe('sub triggers', () => {